استفاده از افکت fade

**BestFriend** · یک شنبه 30 بهمن 1390, 12:14 عصر

با سلام من میخوا با جاوا اسکریپت یه کاری کنم که یه Image با افکت fade in و fade out بیاد و بره باید چه کدی بنویسم؟
با تشکر.

**buggen** · یک شنبه 30 بهمن 1390, 12:32 عصر

با 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");
});

**BestFriend** · یک شنبه 30 بهمن 1390, 12:48 عصر

این کد کار نکرد
من میخوام وقتی رو یه Image کلیک کردم شروع کنه به Fade in شدن یه Image دیگه

**BestFriend** · یک شنبه 30 بهمن 1390, 13:53 عصر

این کد رو نوشتم ببینید درسته؟

کد 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 رو نوشتم ولی کار نمیکنه ایرادش کجاست؟
با تشکر.

**buggen** · یک شنبه 30 بهمن 1390, 19:53 عصر

این کد رو تست کنید واسه چیزی که شما لازم دارین بهتره

کد 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>

**BestFriend** · دوشنبه 01 اسفند 1390, 09:21 صبح

ممنون از پاسخ کاملتون
با این jquery میشه کاری کرد که کامل fade نشه تا یه درصدی fade out بشه مثلا 30

با تشکر.

**buggen** · دوشنبه 01 اسفند 1390, 12:29 عصر

این کد رو ببینید

کد HTML:

            $(document).ready(function(){        
                
                $("#imageId").hover(function() { 
                    $(this).fadeTo("normal",0.5);
                }, function() {
                    $(this).fadeTo("normal",1);
                });
                
            });

عدد 0.5 رو دقت کنید

**BestFriend** · دوشنبه 01 اسفند 1390, 19:21 عصر

خیلی خیلی ممنون ببخشید سوالام زیاد شد
من این کد رو با 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>

بازم ممنون که پاسخ دادید.

**buggen** · دوشنبه 01 اسفند 1390, 21:29 عصر

ببخشید ببینید من درست متوجه شدم
شما میگید اون div با id ی alla با انمیشن fade تا 50٪ دیده بشه؟

**BestFriend** · سه شنبه 02 اسفند 1390, 09:36 صبح

واقعا ممنون از اینکه توجه میکنید.

من زمانی که روی یه لینک یا عکس کلیک میکنم اون Div با ID ی alla فعال میشه و با افکت fade میاد تا opacity 50% و وقتی روی خود alla کلیک میشه با افکت fade میره تا opacity 0% و غیر فعال میشه

مشکل من اینجاست که نمیتونم فعال یا غیر فعالش کنم یعنی Propery اون div تغییر میکنه ولی تاثیری نمیذار ولی تو زمان طراحی مشکلی نیست با visiblity این کار (فعال و غر فعال کردن ) انجام میشه.

**buggen** · سه شنبه 02 اسفند 1390, 15:51 عصر

مراحل زیر رو انجام بدین ببینید مشکل حل میشه
البته من واسه تست 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");
        });
    });
});

اگه مشکلی هست درخدتم

**BestFriend** · سه شنبه 02 اسفند 1390, 19:21 عصر

لطف داری عزیزم

ممنون مشکل قبلی حل شد با همون css. که شما گفتید ولی با یه مقدار تغییرات.

حالا یه مشکل دیگه هم هست من وقتی صفحه رو اسکرول میکنم یه پایین اون div همون بالا قرار میگیره میشه یه کاری کرد با توجه به مکانی که اسکرول صفحه قرار داره div اوجا بره؟ و سر تا سر صفحه ای رو که کاربر میبینه رو بپوشونه اسکرول کاربر از کار بیفته و تا زمانی که hidden ، div نشده فعال نشه؟

با تشکر فراوان از شما دوست عزیز.

**buggen** · سه شنبه 02 اسفند 1390, 19:42 عصر

باید از position:fixed استفاده کنید
ابن کد رو جایگزین کنید

کد HTML:

<div id="alla" style="display:none;position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #000000;">

**BestFriend** · پنج شنبه 04 اسفند 1390, 12:25 عصر

من از این کد استفاده کردم ولی چون از masterpage استفاده کردم فقط قسمت content رو میپوشونه راه دیگه ای نداره؟

با تشکر.

**buggen** · جمعه 05 اسفند 1390, 00:22 صبح

منظورتون masterpage توی ASP.NET هست؟
اگر منظورتون اون هست باید بگم من ASP کار نکردم درصورت امکان کدتون رو بعد از process بذارید
یا اگه منظورتون چیز دیگه ای هست یکم بیشتر توضیح بدید با تشکر

**BestFriend** · دوشنبه 08 اسفند 1390, 09:10 صبح

بابت همه چی ممنون دوست عزیز مشکل حل شد

**BestFriend** · چهارشنبه 10 اسفند 1390, 09:37 صبح

سلام من دوباره یه سوال برام پیش اومد
من میخوام زمانی که همه ی عکس ها لود شدن یه تابع اجرا بشه و در زمان لود شدنشون هم یه تابع

کد من برای گذاشتن عکس ها این هست:



$(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);

});

});

باید چی کار کنم؟

با تشکر.

نام تاپیک: استفاده از افکت fade

ابزار های تاپیک

نمایش

استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

نقل قول: استفاده از افکت fade

قوانین ایجاد تاپیک در تالار