jquery使用它來動畫只有選定的項目

嗨我有3個重複的同一塊，我想動畫的懸停塊，而不是其他。以下腳本爲所有塊添加動畫。我如何使用jquery「this」來動畫懸停div？我也有.img類。jquery使用它來動畫只有選定的項目

$(document).ready(function() { 
    $(".HomeClaimWrapper").hover(function() { 
    $(".HomeClaimWrapper .img").stop().animate({ 
     top: "-10px" 
    }, 300); 
    }); 

    $(".HomeClaimWrapper").mouseout(function() { 
    $(".HomeClaimWrapper .img").stop().animate({ 
     top: "-5px" 
    }, 300); 
    }); 
});

來源

2012-08-31 nasty

你可以像這樣

$(document).ready(function(){ 
    $.each($(".HomeClaimWrapper .img").hover(function(){ 
     $(this).stop().animate({ 
     top: "-10px" 
     }, 300); 
    }); 

    $.each($(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
});

來源

2012-08-31 05:45:02 rahul

只需使用this作爲事件處理程序中選擇：

$(function(){ 
    $(".HomeClaimWrapper .img").hover(function(){ 
     $(this).stop().animate({ 
      top: "-10px" 
     }, 300); 
    }); 

    $(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
});

來源

2012-08-31 05:44:49

這種綁定事件要使用this：

$(document).ready(function(){ 
    $(".HomeClaimWrapper .img").hover(function(){ 
    $(this).stop().animate({ 
     top: "-10px" 
     }, 300); 
    }); 

    $(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
});

請注意.img。如果在代碼中某處沒有看到class="img"，請刪除.並離開img。

來源

2012-08-31 05:45:04

使用本

$(document).ready(function(){ 
    $(".HomeClaimWrapper .img").hover(function(){ 
    $(this).stop().animate({ 
     top: "-10px" 
    }, 300); 
    }); 

    $(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
});

編輯：上的div

$(document).ready(function(){ 
    $(".HomeClaimWrapper").hover(function(){ 
    $(this).find(".img").stop().animate({ 
     top: "-10px" 
    }, 300); 
    }); 

    $(".HomeClaimWrapper").mouseout(function(){ 
     $(this).find(".img").stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
});

來源

2012-08-31 05:45:23 Uttara

謝謝。如果我想在整個潛水徘徊時動畫化圖像，該怎麼辦？舉個例子$（「。HomeClaimWrapper」）。hover（function（） - 如何僅在HomeClaimWrapper div中動畫他的圖像？ – nasty

編輯我的答案，是的確定蛇眼睛已經在他的答案中寫了如果沒有'.img'類，然後使用'img'而不是'.img' – Uttara

懸停動畫img替換$（ 'HomeClaimWrapper .IMG。'）以$（本）

來源

2012-08-31 05:45:41 Subash

我個人喜歡將我的狀態定義保存在一個地方，而新版本的jQuery可以輕鬆實現懸停事件：

$(function(){ 
    $(".HomeClaimWrapper .img").hover(function(e){ 
     $(this).stop().animate({ 
      top: e.type == 'mouseenter' ? "-10px" : "-5px" 
     }, 300); 
    }); 
});

也就是說，順便說一句，是目前單參數定義，所以我想你想挺你的（這裏的其他答案）樣品不會做。它會觸發鼠標進入和離開。

如果您希望它們分開，則有兩個參數版本的懸停。

來源

2012-08-31 06:00:37 shannon

jquery使用它來動畫只有選定的項目

回答

相關問題