jQuery的切換兩大功能自動

Question

我有這樣的代碼，但它不工作：

$('.hover_shine').bind('mouseover', function() { 
    $(this).css('background-position','10px 0'); 
}); 
$('.hover_shine').bind('mouseoutt', function() { 
    $(this).css('background-position','-380px 0'); 
}); 
setTimeout(function(){ 
    $('.hover_shine').toggle($(this).trigger('mouseover'),$(this).trigger('mouseoutt')); 
},500); 

我想每500毫秒（鼠標懸停，mouseoutt）事件之間交換該元素

謝謝你提前 AGad

Answer 1

試着這麼做

var $el = $('.hover_shine'), 
    interval; 

function h1() { 
    $el.css('color', 'red'); 
} 

function h2() { 
    $el.css('color', ''); 
} 

function auto() { 
    var fn; 
    interval = setInterval(function() { 
     (fn = fn == h1 ? h2 : h1)() 
    }, 500) 
} 
$('.hover_shine').bind('mouseover', function() { 
    h1(); 
    clearInterval(interval); 
}); 
$('.hover_shine').bind('mouseout', function() { 
    h2(); 
    auto(); 
}); 
auto(); 

演示：Fiddle

Answer 2

嘗試使用事件mouseenter和mouseleave代替。

$('.hover_shine').bind('mouseenter', function() { 
    $(this).css('background-position','10px 0'); 
}); 
$('.hover_shine').bind('mouseleave', function() { 
    $(this).css('background-position','-380px 0'); 
}); 

你可能會想老 「.toggle（）」 jQuery中，這已被刪除：見http://api.jquery.com/toggle-event/