ציטוט:
נכתב במקור על ידי Hanino
אני לא מתמחה בJQ
אבל ניראה לי שזה יכול להיות פתרון בשבילך:
קוד:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#thisimg").mouseover(function(){
$(this).fadeOut("slow");
$(this).attr("src","image2.png");
$(this).fadeIn("slow");
});
});
</script>
</head>
<body>
<img id="thisimg" src="image1.png" />
</body>
</html>
|
תרשה לי לתקן:
קוד:
$("#thisimg").mouseover(function(){
$(this).fadeOut("slow", function(){
$(this).attr("src","image2.png")
.load(function(){
$(this).fadeIn("slow");
});
});
});
עריכה:
בכל אופן, אם אתה רוצה שבו זמנית תמונה אחת תעשה fadeOut והאחרת fadeIn עליך להכניס את שתיהן לתוך איזשהו container ויהיה לו position:relative.
לתמונות שבתוכו יהיה position:absolute וגם top:0; left:0.
אחת מהן יהיה מוסתרת והשניה תהיה מוצגת. ופשוט תכיל את האפקטין של fadeIn ו-fadeOut לכל אחת מהן בהתאמה.
ה-CSS הזה דואג לכך שהתמונות יהיו אחת מתחת לשניה וזה האפקט שאתה רוצה.
09-12-10, 20:50
תצורת אשכולות