用.click動畫覆蓋.hover動畫？

Question

我對jquery和任何類型的編程都很陌生。

單擊對象時是否有覆蓋.hover的方法？我試圖讓圖片在點擊時保持動畫的寬度，而不會回到它的原始大小。

這是我到目前爲止有：

$(function() { 
    $("#eggroll2, #eggrollL2").hover(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }, function() { 
     $(this).stop(false, false).animate({ 
      width: "150px" 
     }, 250, "swing") 
    }); 

    $("#middleRoll").hover(function() { 
     $("#eggroll2, #eggrollL2").stop(true, true).animate({ 
      width: "250px" 
     }, 250, "swing") 
    }, function() { 
     $("#eggroll2, #eggrollL2").stop(false, false).animate({ 
      width: "150px" 
     }, 250, "swing") 
    }); 
});​ 

Answer 1

嗯......試試這個？

$(function() { 
    $("#eggroll2, #eggrollL2").click(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }); 

    $("#middleRoll").click(function() { 
     $("#eggroll2, #eggrollL2").stop(true, true).animate({ 
      width: "250px" 
     }, 250, "swing") 
    }); 
});​ 

Answer 2

您可以添加一個類來表示，它的點擊，而不是收縮回：

$(function() { 
    $("#eggroll2, #eggrollL2").hover(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }, function() { 
     if (!$(this).hasClass('clicked')) { 
      $(this).stop(false, false).animate({ 
       width: "150px" 
      }, 250, "swing") 
     } 
    }).click(function() { 
     $(this).addClass('clicked'); 
    }); 
});​ 

如果你想點擊切換收縮/不縮水的狀態，然後使用toggleClass代替點擊處理程序中的addClass。

編輯：（答案OP的評論）

添加類要收縮/擴張的元素。假設他們是<img/>，做到這一點：

<img class="images" ... > 

修改上面的代碼是這樣的：

$(function() { 
    $(".images").hover(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }, function() { 
     if (!$(this).hasClass('clicked')) { 
      $(this).stop(false, false).animate({ 
       width: "150px" 
      }, 250, "swing") 
     } 
    }).click(function() { 
     // remove "clicked" class from all images 
     $(".images").removeClass("clicked"); 

     // add the class to this one only 
     $(this).addClass('clicked'); 

     // mouseout is the 2nd parameter to 'hover' handler 
     $(".images").trigger("mouseout"); 
    }); 
});​