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

morsrh · 09-12-10, 20:15

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

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

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");

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

Haimz · 09-12-10, 20:39

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

Hagaibl · 09-12-10, 20:45

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

**IgalSt** · 09-12-10, 20:50

ציטוט:

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

morsrh · 09-12-10, 23:19

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

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

Hagaibl · 09-12-10, 23:23

תוסיף:

PHP קוד:


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

It should do the trick.

morsrh · 11-12-10, 21:49

תודה , הסתדר.

**IgalSt** · 12-12-10, 09:30

ציטוט:

נכתב במקור על ידי Hagaibl

תוסיף:

PHP קוד:


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

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

It should do the trick.

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

09-12-10, 20:15	# 1
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	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"); רעיונות מישהו? תודה רבה.

09-12-10, 20:45	# 3
Hagaibl משתמש - היכל התהילה מיני פרופיל תאריך הצטרפות: Jul 2010 הודעות: 214	לא הבנתי אתה מחפש פונקציה מקבילה לanimate רק של jQuery? אם כן אז:http://api.jquery.com/animate/ __________________ בברכה, חגי בלוך גדות.

09-12-10, 23:23	# 6
Hagaibl משתמש - היכל התהילה מיני פרופיל תאריך הצטרפות: Jul 2010 הודעות: 214	תוסיף: PHP קוד: `$(this).attr("height","50"); $(this).attr("width","50");` It should do the trick. __________________ בברכה, חגי בלוך גדות.


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

09-12-10, 23:19	# 5
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	תודה על התמיכה בכל הקשור לjquery יגאל אבל יש באג קטן בסקריפט.. התאג img משמש אותי כדי שאם תיכנס תמונה גדולה יותר מ- 50 על 50 אז התמונה תוקטן ותתאים את עצמה, וכאשר אני מכניס תמונה גדולה יותר מ- 50 על 50 לתוך התאג img אז כשהסקריפט מופעל הוא משנה את התמונה לתמונה מספר 2 ואז מחזיר לתמונה מספר 1 (כאשר היא לא מוקטנת ורואים רק את הפינה של התמונה המקורית) ורק אז מחליף לתמונה שתיים כמו שזה אמור לעשות. איך אפשר למנוע את ה"באג" הזה? תודה.

11-12-10, 21:49	# 7
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	תודה , הסתדר.

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)