jquery mouseover動畫

Question

我在使用切換時可以正常工作，但我需要在鼠標懸停而不是點擊時打開這些菜單。

有問題的網頁： http://igs.link-networkonline.com/campaign-landing-page/

我的代碼：

$(function() { 
$("img.button1").toggle(function() { 
    $(".first").animate({'height': '295px', 'top': "-270px"}); 
    $("img.button1").animate({'top': "-235px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    $("body").animate({'padding-bottom': '-300px'}); 
}, function() { 
    $(".first").animate({'height': '75px', 'top': "-58px", 'overflow': "hidden"}); 
    $("img.button1").animate({'top': "-25px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
}); 
    $("img.button2").toggle(function() { 
     $(".second").animate({'height': '285px', 'top': "-268px"}); 
     $("img.button2").animate({'top': "-240px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    }, function() { 
     $(".second").animate({'height': '75px', 'top': "-58px"}); 
     $("img.button2").animate({'top': "-25px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
    }); 
$("img.button3").toggle(function() { 
    $(".third").animate({'height': '260px', 'top': "-243px"}); 
    $("img.button3").animate({'top': "-210px"}); 
    $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
}, function() { 
    $(".third").animate({'height': '75px', 'top': "-58px"}); 
    $("img.button3").animate({'top': "-25px"}); 
    $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
}); 

$(".first").toggle(function() { 
    $(".first").animate({'height': '295px', 'top': "-270px"}); 
    $("img.button1").animate({'top': "-235px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    $("body").animate({'padding-bottom': '-300px'}); 
}, function() { 
    $(".first").animate({'height': '75px', 'top': "-58px", 'overflow': "hidden"}); 
    $("img.button1").animate({'top': "-25px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
}); 
    $(".second").toggle(function() { 
     $(".second").animate({'height': '285px', 'top': "-268px"}); 
     $("img.button2").animate({'top': "-240px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    }, function() { 
     $(".second").animate({'height': '75px', 'top': "-58px"}); 
     $("img.button2").animate({'top': "-25px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
    }); 
    $(".third").toggle(function() { 
     $(".third").animate({'height': '260px', 'top': "-243px"}); 
     $("img.button3").animate({'top': "-210px"}); 
     $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    }, function() { 
     $(".third").animate({'height': '75px', 'top': "-58px"}); 
     $("img.button3").animate({'top': "-25px"}); 
     $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
    }); 

}); 

這已經花了我很多時間來獲得正常運行。我需要每個鼠標滑過鼠標，然後滑出鼠標。謝謝。 }）; `

Answer 1

您可以使用.mouseover（）& .mouseout（）事件來處理它。