jquery, takip edilmek üzere bir bağlantıyı geciktiriyor

Question

Bağlantı takip edilmeden önce çalmak istediğim kısa bir css tabanlı animasyona sahibim (sayfa yüklenen bir kart tıklatıldıktan sonra dışarı çıkar). Ancak, şu anda, sayfa çok hızlı bir şekilde yükler. Href'in takip edilmesini kısaca geciktirmek istiyorum.

İşte bu var:

$(document).ready(function() { 
    $("#card").css("top","0px"); 
    $(".clickit").click(function() { 
     $("#card").css("top","-500"); 
    }); 
}); 

ilk satır sayfa yüklendiğinde kartı saldırıya geçer. Bundan sonra, CSS'yi değiştiren tıklatma çağrısıdır, fakat sanki animasyonun yerine sayfa hemen yüklendiği için orada bir tür gecikme olması gerektiğini söylediğim gibi.

#card { 
    width: 400px; 
    height: 500px; 
    position: relative; 
    top: -500px; 
    -webkit-transition:all .5s; 
} 

Bu 2008 yılından this question çok benzer bir sorun

(evet, bu webkit-yalnızca şu anda biliyorum) ama jQuery olmuştur biliyorum: değiştirildiğinde CSS şöyle o zamandan beri önemli ölçüde güncellendi, bu yüzden daha modern bir çözüm olup olmadığını görmek istedim.

Teşekkür ederiz!

Answer 1

.css() ve -webkit-transition:'u kullandığınızdan, yeni konumu ertelemek için setTimeout() kullanmanız gerekir.

canlı örneği deneyin: http://jsfiddle.net/2WJH9/

$(document).ready(function() { 
    $("#card").css("top","0px"); 
    $(".clickit").click(function() { 
     $("#card").css("top","-500px"); // Added px to make it work, 
             // or get rid of quotes -500 
     var href = $(this).attr('href'); 

      // Delay setting the location for one second 
     setTimeout(function() {window.location = href}, 1000); 
     return false; 
    }); 
});​ 

setTimeout() 1 saniye (1,000 milisaniye) için ayarlanmış olmaktan window.location geciktirir. Eğer -webkit-transition: den .5 saniye eşleştirmek istiyorsanız, o zaman 500.

• .setTimeout() olarak değiştirin - http://www.w3schools.com/js/js_timing.asp

Answer 2

Bu, 2008'den bu soruya çok benzer bir sorundur, ancak jQuery'nin o zamandan beri önemli ölçüde güncellendiğini biliyorum, bu yüzden daha modern bir çözüm olup olmadığını görmek istedim.

Nope, hala aynı cevap. Etkinliği iptal edin, daha sonra konumu kendiniz yükleyin.

Answer 3

yapabilirsiniz preventDefault() bağlantısı, daha sonra CSS geçiş işlemleri jQuery'nin hareketlendirmek işlevini kullanın üzerine Animasyon tamamlandıktan sonra bağlantıyı takip edin.

$('.clickit').click(function(e) { 
    e.preventDefault(); 
    href = $(this).attr('href'); 
    $('#card').animate({ top: '-500px' }, 500, function() { 
     window.location = href; 
    }); 
});