Javascript「while histed」loop

任何人都可以幫助我解決這個問題......我有一個按鈕，當它被徘徊時，觸發一個動作。但是，只要按鈕懸停，我想重複它。Javascript「while histed」loop

我會很感激的任何解決方案，無論是在jQuery的或純JavaScript - 這裏是我的代碼看起來是在這一刻（jQuery中）：

var scrollingposition = 0; 

$('#button').hover(function(){ 
++scrollingposition; 
    $('#object').css("right", scrollingposition); 
    });

現在我怎樣才能把這個變成某種while循環，以便#object將px移動到px，因爲#button是懸停的，而不僅僅是當鼠標進入它時？

來源

2010-11-24 Ramon

存檔目的：選擇的答案在這裏是我需要什麼http://stackoverflow.com/questions/3966273/an-if-mouseover-or-a-do-while-mouseover-in- javascript-jquery – leticia 2014-03-13 20:21:27

OK ......另一個刺傷了答案：

$('myselector').each(function() { 
    var hovered = false; 
    var loop = window.setInterval(function() { 
    if (hovered) { 
     // ... 
    } 
    }, 250); 

    $(this).hover(
    function() { 
     hovered = true; 
    }, 
    function() { 
     hovered = false; 
    } 
); 
});

250表示任務每四分之一秒重複一次。您可以減少此數字以使其更快，或增加數字以使其變慢。

來源

2010-11-24 11:40:17

如果它的動畫，你可以「停止」一半的動畫。因此，它看起來像你的東西移動到左邊，所以你可以這樣做：

var maxScroll = 9999; 
$('#button').hover(
    function(){ $('#object').animate({ "right":maxScroll+"px" }, 10000); }, 
    function(){ $('#object').stop(); });

來源

2010-11-24 10:02:32

這個這不是一個好方法，因爲你的速度將會遍佈各處。例如，如果我們稍微盤旋一下，我們的速度是9999/10000（大約1px/ms），如果我們再次懸停，說我們第一次滾動一半，現在我們在4999/1000，或.5px/ms ...你的持續時間將需要根據剩餘的距離來計算，否則它將與它成比例，並且總是在變化。 – 2010-11-24 10:13:30

嗨，感謝大家提供的有用答案，我仍然需要一點點才能使它真正起作用：Nathan，儘管您的解決方案對我來說非常合理，但出於某種原因，它不起作用，但塊（「此頁面上的腳本是太忙或沒有反應 - 托馬斯，你的解決方案是有效的，除了有尼克指出的速度問題，但對我來說它表現的方式不同，對象在盤旋時不斷加速，當我徘徊並返回時，它又開始了慢，加快....有沒有人知道如何推這些解決方案的工作？並非常感謝每個人的時間放在 – Ramon 2010-11-24 11:24:31

var buttonHovered = false; 
$('#button').hover(function() { 
    buttonHovered = true; 
    while (buttonHovered) { 
    ... 
    } 
}, 
function() { 
    buttonHovered = false; 
});

如果您想爲多個對象做到這一點，它可能會更好，使其更多的面向對象比儘管一個全局變量。

編輯： 想想對付多個目標的最好的辦法是把它放在一個。每（）塊：

$('myselector').each(function() { 
    var hovered = false; 
    $(this).hover(function() { 
    hovered = true; 
    while (hovered) { 
     ... 
    } 
    }, 
    function() { 
    hovered = false; 
    }); 
});

EDIT2：或者你可以通過添加一個做到這一點類：

$('selector').hover(function() { 
    $(this).addClass('hovered'); 
    while ($(this).hasClass('hovered')) { 
    ... 
    } 
}, function() { 
    $(this).removeClass('hovered'); 
});

來源

2010-11-24 10:03:33

嗨彌敦道，是的，我需要它在多個對象，如果有一種方式，你可以與我分享我非常感謝它 - 我來自PHP，JavaScript的noob ...謝謝 – Ramon 2010-11-24 10:08:16

拉蒙，看我的編輯 – 2010-11-24 10:33:36

var scrollingposition = 0; 

$('#button').hover(function(){ 
    var $this = $(this); 
    var $obj = $("#object"); 
    while ($this.is(":hover")) { 
     scrollingposition += 1; 
     $obj.css("right", scrollingposition); 
    } 
});

來源

2010-11-24 12:01:09

Nathan's answer是一個良好的開端，但你也應該使用window.clearInterval當鼠標離開元素（mouseleave事件）取消其已設置使用setInterval()重複動作，因爲這樣的「環」僅在鼠標指針進入元素時才運行（mouseover事件）。

下面是一個示例代碼：

function doSomethingRepeatedly(){ 
    // do this repeatedly when hovering the element 
    } 

    var intervalId; 

    $(document).ready(function() { 

    $('#myelement').hover(function() { 
     var intervalDelay = 10; 
     // call doSomethingRepeatedly() function repeatedly with 10ms delay between the function calls 
     intervalId = setInterval(doSomethingRepeatedly, intervalDelay); 
    }, function() { 
     // cancel calling doSomethingRepeatedly() function repeatedly 
     clearInterval(intervalId); 
    }); 

    });

我創建上的jsfiddle一個示例代碼，其說明了如何使用所示的代碼滾動左到右元素的背景圖像，然後向後上hover以上：

http://jsfiddle.net/Sk8erPeter/HLT3J/15/

來源

2013-01-11 18:50:09 Sk8erPeter

Javascript「while histed」loop

回答

相關問題