با سلام من میخوا با جاوا اسکریپت یه کاری کنم که یه Image با افکت fade in و fade out بیاد و بره باید چه کدی بنویسم؟
با تشکر.
Printable View
با سلام من میخوا با جاوا اسکریپت یه کاری کنم که یه Image با افکت fade in و fade out بیاد و بره باید چه کدی بنویسم؟
با تشکر.
با jquery به راحتی میشه ولی من با جاواسکرپت تنها هم این کار رو کردم
در زیر مثال jquery رو ببنید
کد HTML:$("#something").fadeOut("slow");
$("#something").fadeOut(2000);
$("#something").fadeOut("slow", function() {
alert("Animation done");
});
کد HTML:$("#something").fadeIn("slow");
$("#something").fadeIn(2000);
$("#something").fadeIn("slow", function() {
alert("Animation done");
});
این کد کار نکرد
من میخوام وقتی رو یه Image کلیک کردم شروع کنه به Fade in شدن یه Image دیگه
این کد رو نوشتم ببینید درسته؟
و الی آخرکد HTML:</style>
<scriptsrc="jquery-1.3.2.min.js"type="text/javascript">
$("#img1").mouseover($("#img1").fadeIn("slow"));
</script>
</head>
<body>
<formid="form1"runat="server">
<divstyle="width: 620px; height: 535px">
<divid="Image">
<imgalt=""src="1.jpg"style="filter:alpha(opacity=0); -moz-opacity:0; height: 100%; width: 100%; top: 50px;"id="img"/></div>
<divid="menu">
<imgid="img1"alt=""
src="1.jpg"style="filter:alpha(opacity=30); -moz-opacity:0.3; width: 80px; height: 80px; margin:10px"/>
من میخوام وقتی رفتم رو img1 شروع کنه به fade in شدن و وقتی ماوس از روش رفت fade out بشه و وقتی روش کلیک شد یه عکس داخل img قرار بگیره و fade in بشه.
تو کد بالا فقط mose over رو نوشتم ولی کار نمیکنه ایرادش کجاست؟
با تشکر.
این کد رو تست کنید واسه چیزی که شما لازم دارین بهتره
کد HTML:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fade</title>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#imageId").hover(function() {
$(this).fadeTo("normal",0);
}, function() {
$(this).fadeTo("normal",1);
});
});
</script>
</head>
<body>
<img id="imageId" src="images/1.jpg" />
</body>
</html>
ممنون از پاسخ کاملتون
با این jquery میشه کاری کرد که کامل fade نشه تا یه درصدی fade out بشه مثلا 30
با تشکر.
این کد رو ببینید
عدد 0.5 رو دقت کنیدکد HTML:$(document).ready(function(){
$("#imageId").hover(function() {
$(this).fadeTo("normal",0.5);
}, function() {
$(this).fadeTo("normal",1);
});
});
خیلی خیلی ممنون ببخشید سوالام زیاد شد
من این کد رو با animate پیاده سازی کردم و جواب گرفتم ولی حالا یه مشکل دارم من یه div گذاشتم که سر تا سر صفحه رو میپوشونه با visible :hidden وقتی میخوام با انیمیشن تا 50 درصد opacity برم هیچ چی نمیاره تو صفحه باید چی کار کنم؟
اینم کدیه که براش نوشتم.
بازم ممنون که پاسخ دادید.کد HTML:<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#aryo").click(function () {
alert();
$("#alla").removeAttr();
$("#alla").fadeTo("normal", 1);
});
});
</script>
<div id="alla"
style="filter:alpha(opacity=0); -moz-opacity:0; position: absolute; width: 100%; height: 100%; top: 0%; bottom: 0%; right: 0%; left: 0%; background-color: #000000;">
<div id="show"
style="background-color: #ffffff; width: 39%; height: 88%; position: absolute; top: 6%; left: 31%; right: 30%; bottom: 6%;">
<style type="text/css">
#Image_G
{
margin:10px;
height: 370px;
width: 500px;
}
#menu_G
{
height: 101px;
text-align: center;
width: 522px;
}
</style>
<script type="text/javascript">
var add = "123#@";
// ********************************* IMG1 ********************************************
$(document).ready(function () {
$("#img1").mouseover(function () {
$(this).fadeTo("fast", 1);
});
});
$(document).ready(function () {
$("#img1").mouseout(function () {
$(this).animate({
opacity: 0.4
}, "fast");
});
});
$(document).ready(function () {
$("#img1").click(function () {
$("#img10").fadeTo("slow", 0, function () { $("#img10").attr({ src: "Projects/" + add + "/1.jpg" }); });
$("#img10").fadeTo("slow", 1);
});
});
//*********************************************************************************************
// ********************************* IMG2 ********************************************
$(document).ready(function () {
$("#img2").mouseover(function () {
$(this).fadeTo("fast", 1);
});
});
$(document).ready(function () {
$("#img2").mouseout(function () {
$(this).animate({
opacity: 0.4
}, "fast");
});
});
$(document).ready(function () {
$("#img2").click(function () {
$("#img10").fadeTo("slow", 0, function () { $("#img10").attr({ src: "Projects/" + add + "/2.jpg" }); });
$("#img10").fadeTo("slow", 1);
});
});
//*********************************************************************************************
// ********************************* IMG3 ********************************************
$(document).ready(function () {
$("#img3").mouseover(function () {
$(this).fadeTo("fast", 1);
});
});
$(document).ready(function () {
$("#img3").mouseout(function () {
$(this).animate({
opacity: 0.4
}, "fast");
});
});
$(document).ready(function () {
$("#img3").click(function () {
$("#img10").fadeTo("slow", 0, function () { $("#img10").attr({ src: "Projects/" + add + "/3.jpg" }); });
$("#img10").fadeTo("slow", 1);
});
});
//*********************************************************************************************
// ********************************* IMG4 ********************************************
$(document).ready(function () {
$("#img4").mouseover(function () {
$(this).fadeTo("fast", 1);
});
});
$(document).ready(function () {
$("#img4").mouseout(function () {
$(this).animate({
opacity: 0.4
}, "fast");
});
});
$(document).ready(function () {
$("#img4").click(function () {
$("#img10").fadeTo("slow", 0, function () { $("#img10").attr({ src: "Projects/" + add + "/4.jpg" }); });
$("#img10").fadeTo("slow", 1);
});
});
//*********************************************************************************************
// ********************************* IMG5 ********************************************
$(document).ready(function () {
$("#img5").mouseover(function () {
$(this).fadeTo("fast", 1);
});
});
$(document).ready(function () {
$("#img5").mouseout(function () {
$(this).animate({
opacity: 0.4
}, "fast");
});
});
$(document).ready(function () {
$("#img5").click(function () {
$("#img10").fadeTo("slow", 0, function () { $("#img10").attr({ src: "Projects/" + add + "/5.jpg" }); });
$("#img10").fadeTo("slow", 1);
});
});
$(document).ready(function () {
$("#alla").click(function () {
$(this).fadeTo("fast", 0, function () { $(this).attr({ visibility: 'hidden' }); });
});
});
//*********************************************************************************************
</script>
ببخشید ببینید من درست متوجه شدم
شما میگید اون div با id ی alla با انمیشن fade تا 50٪ دیده بشه؟
واقعا ممنون از اینکه توجه میکنید.
من زمانی که روی یه لینک یا عکس کلیک میکنم اون Div با ID ی alla فعال میشه و با افکت fade میاد تا opacity 50% و وقتی روی خود alla کلیک میشه با افکت fade میره تا opacity 0% و غیر فعال میشه
مشکل من اینجاست که نمیتونم فعال یا غیر فعالش کنم یعنی Propery اون div تغییر میکنه ولی تاثیری نمیذار ولی تو زمان طراحی مشکلی نیست با visiblity این کار (فعال و غر فعال کردن ) انجام میشه.
مراحل زیر رو انجام بدین ببینید مشکل حل میشه
البته من واسه تست onload استفاده کردم نه وقتی رو عکس کلیک بشه
1.از استایل alla
حذف وکد HTML:filter:alpha(opacity=0); -moz-opacity:0;
رو اضافه کرم تا اول کار دیده نشهکد HTML:display:none;
2.و اسکریپت
رو با این عوض کردمکد HTML:$(document).ready(function () {
$("#aryo").click(function () {
alert();
$("#alla").removeAttr();
$("#alla").fadeTo("normal", 1);
});
});
اگه مشکلی هست درخدتمکد HTML:$(document).ready(function () {
$("#alla").fadeTo("normal", 1);
$("#alla").click(function () {
$("#alla").fadeTo("normal", 0,function(){
$('#alla').css("display","none");
});
});
});
لطف داری عزیزم :قلب:
ممنون مشکل قبلی حل شد با همون css. که شما گفتید ولی با یه مقدار تغییرات.
حالا یه مشکل دیگه هم هست من وقتی صفحه رو اسکرول میکنم یه پایین اون div همون بالا قرار میگیره میشه یه کاری کرد با توجه به مکانی که اسکرول صفحه قرار داره div اوجا بره؟ و سر تا سر صفحه ای رو که کاربر میبینه رو بپوشونه اسکرول کاربر از کار بیفته و تا زمانی که hidden ، div نشده فعال نشه؟
با تشکر فراوان از شما دوست عزیز.
باید از position:fixed استفاده کنید
ابن کد رو جایگزین کنید
کد HTML:<div id="alla" style="display:none;position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #000000;">
من از این کد استفاده کردم ولی چون از masterpage استفاده کردم فقط قسمت content رو میپوشونه راه دیگه ای نداره؟
با تشکر.
منظورتون masterpage توی ASP.NET هست؟
اگر منظورتون اون هست باید بگم من ASP کار نکردم درصورت امکان کدتون رو بعد از process بذارید
یا اگه منظورتون چیز دیگه ای هست یکم بیشتر توضیح بدید با تشکر
بابت همه چی ممنون دوست عزیز مشکل حل شد
سلام من دوباره یه سوال برام پیش اومد
من میخوام زمانی که همه ی عکس ها لود شدن یه تابع اجرا بشه و در زمان لود شدنشون هم یه تابع
کد من برای گذاشتن عکس ها این هست:
$(document).ready(function () {
$("#BBQ").click(function () {
add = "BBQ";
document.getElementById("img10").src = "Projects/" + add + "/1.jpg";
document.getElementById("img1").src = "Projects/" + add + "/1.jpg";
document.getElementById("img2").src = "Projects/" + add + "/2.jpg";
document.getElementById("img3").src = "Projects/" + add + "/3.jpg";
document.getElementById("img4").src = "Projects/" + add + "/4.jpg";
document.getElementById("img5").src = "Projects/" + add + "/5.jpg";
document.getElementById("alla").style.visibility = 'visible';
document.getElementById("alla").style.filter = 'alpha(opacity=0)';
document.getElementById("show").style.filter = 'alpha(opacity=0)';
$("#alla").fadeTo("normal", 0.5);
$("#show").fadeTo("normal", 1);
});
});
باید چی کار کنم؟
با تشکر.