Html鏈接彈跳只有一個元素與JQuery？

我的JQuery代碼有問題。當您將鏈接懸停在列表中時，會彈出每個menu_img類，但它只應反彈一個元素。Html鏈接彈跳只有一個元素與JQuery？

HTML：

<ul class="menu"> 
    <li> 
     <div class="bounce"></div> <a href="#">Test1</a> 
    </li> 
    <li> 
     <div class="bounce"></div> <a href="#">Test2</a> 
    </li> 
</ul>

CSS：

ul.menu li { 
    list-style-type:none; 
} 
.bounce { 
    position: absolut; 
    height: 17px; 
    width: 17px; 
    margin-left: 5px; 
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/a/a0/Arrow_green2.png"); 
}

JS：

$("ul.menu > li a").hover(function() { 
    doBounce(3, '2px', 200); 
}); 


function doBounce(times, distance, speed) { 
    for (i = 0; i <times; i++) { 
     $(".bounce").animate({ 
      marginLeft: '-=' + distance 
     }, speed) 
      .animate({ 
      marginLeft: '+=' + distance 
     }, speed); 
    } 
}

jsFiddle

來源

2014-03-28 Reick

您可以懸停元素傳遞給doBounce()升IKE在此

$("ul.menu > li a").hover(function() { 
    doBounce($(this),3, '2px', 200); // Pass hovered element as $(this) 
}); 


function doBounce(elementTobounce, times, distance, speed) { 
    for (i = 0; i <times; i++) { 
     $(elementTobounce).prev(".bounce").animate({ 
      marginLeft: '-=' + distance 
     }, speed) 
      .animate({ 
      marginLeft: '+=' + distance 
     }, speed); 
    } 
}

elementTobounce是你徘徊a元素，則指的是你的.bounce類，它是具有圖像->將獲得動畫.prev()。

文檔：

.prev()

Demo

來源

2014-03-28 16:37:38

感謝那是我的問題的解決方案=） – Reick

..Welcome朋友.. :) –

嘗試調整功能，以引用元通 - $(this) - 到doBounce功能，使當前正在徘徊只有項目受到影響。

$("ul.menu > li a").hover(function() { 
    doBounce($(this), 3, '2px', 200); 
}); 


function doBounce(el, times, distance, speed) { 
    for (i = 0; i <times; i++) { 
     el.prev('.bounce').animate({ 
      marginLeft: '-=' + distance 
     }, speed) 
      .animate({ 
      marginLeft: '+=' + distance 
     }, speed); 
    } 
}

Fiddle

來源

2014-03-28 16:37:43 sbeliv01

箭應在此處反彈不鏈接文本！ –

@Dhaval Marthak - 編輯。好眼睛。 – sbeliv01

...來吧...... :) –

如果我理解你的權利..你需要反彈你上面的測試文本箭頭..

，所以你需要傳遞要反彈哪個元素。

嘗試像this

<div class="bounce" id="test1"></div> <a href="#">test1</a> 
<div class="bounce" id="test2"></div> <a href="#">test2</a> 

$("ul.menu > li a").hover(function() { 
    var elementId = $(this)[0].text; 
    doBounce(3, '2px', 200, elementId); 
}); 


function doBounce(times, distance, speed, elementId) { 
    for (i = 0; i <times; i++) { 
    $("#"+elementId).animate({ 
     marginLeft: '-=' + distance 
    }, speed) 
     .animate({ 
     marginLeft: '+=' + distance 
    }, speed); 
    } 
}

來源

2014-03-28 16:48:33

爲什麼這兩個元素被退回的原因是使用了$（反彈）作爲元素被動畫，其中包含2個li元素。

function doBounce(times, distance, speed, obj) { 
for (i = 0; i <times; i++) { 
    $(obj).animate({ 
     marginLeft: '-=' + distance 
    }, speed) 
     .animate({ 
     marginLeft: '+=' + distance 
    }, speed); 
    } 
} 


$("ul.menu > li").hover(function(){ 
    doBounce(3, "2px", 200, $(this)); 
})

來源

2014-03-28 16:49:06 fengshuo

Html鏈接彈跳只有一個元素與JQuery？

回答

相關問題