הוסטס - פורום אחסון האתרים הגדול בישראל - jquery אפשרות זהה לאפקט animate?

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - jquery אפשרות זהה לאפקט animate? (https://hosts.co.il/forums/showthread.php?t=86708)

jquery אפשרות זהה לאפקט animate?

שלום , נתקעתי פה באיזה חתיכת קוד.

יש לי את הקוד הזה לצורך דוגמא

HTML קוד:

<html>

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

           $("#thisdiv").mouseover(function(){

               $("#thisimg").animate('src', "image2.png");

           });

        });

    </script>



    <style type="text/css">

        #thisdiv{

            height: 50px;

            width:50px;

            background-image: url('image1.png');

        }

        #thisimg{

            height: 50px;

            width:50px;

        }

    </style>

</head>

<body>



<div id="thisdiv">

    <img id="thisimg" src="image1.png" />

</div>



</body>

</html>

האפקט שאני רוצה לעשות פה הוא שהתמונה image1 מתחילה להיעלם והתמונה image2 נכנסת בתוך התמונה image1.
משום מה שאני עובד רק עם צבעים אז זה עובד לי טוב מאוד , שצבע אחד נכנס לי בתוך צבע אחר אבל עם תמונות זה לא עובד לי בכלל.

בקטע הבעייתי פה הוא

HTML קוד:

$("#thisimg").animate('src', "image2.png");

רעיונות מישהו?
תודה רבה.

אני לא מתמחה ב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>

לא הבנתי אתה מחפש פונקציה מקבילה לanimate רק של jQuery?
אם כן אז:http://api.jquery.com/animate/

ציטוט:

נכתב במקור על ידי Hanino (פרסם 788626)

אני לא מתמחה ב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 הזה דואג לכך שהתמונות יהיו אחת מתחת לשניה וזה האפקט שאתה רוצה.

תודה על התמיכה בכל הקשור לjquery יגאל אבל יש באג קטן בסקריפט..
התאג img משמש אותי כדי שאם תיכנס תמונה גדולה יותר מ- 50 על 50 אז התמונה תוקטן ותתאים את עצמה,
וכאשר אני מכניס תמונה גדולה יותר מ- 50 על 50 לתוך התאג img אז כשהסקריפט מופעל הוא משנה את התמונה לתמונה מספר 2 ואז מחזיר לתמונה מספר 1 (כאשר היא לא מוקטנת ורואים רק את הפינה של התמונה המקורית) ורק אז מחליף לתמונה שתיים כמו שזה אמור לעשות.

איך אפשר למנוע את ה"באג" הזה?
תודה.

תוסיף:

PHP קוד:


		
			
$(this).attr("height","50");
$(this).attr("width","50");

It should do the trick.

תודה , הסתדר.

ציטוט:

נכתב במקור על ידי Hagaibl (פרסם 788646)

תוסיף:

PHP קוד:


		
			
$(this).attr("height","50");

$(this).attr("width","50");

It should do the trick.

או ב-CSS, שזו האופציה המועדפת עליי.