jQuery – 9 – Sidebar Slide In – besser

Dieses SlideIn funktioniert zwar .. aber skaliert noch nicht .. ihr könnt es nur auf ein ID im DOM anwenden .. außerdem kann man die DOM Abfragen in jQuery noch reduzieren und das ganze somit beschleunigen (das merkt man zwar nicht) .. aber wir wollen ja hier sauberen Code verbreiten ..

Darum hab ichs mir nochmal vorgenommen und verbessert .. ihr könnt nun auf beliebig viele Klassen im DOM matchen .. dazu verwenden wir die .each Methode aus jQuery.

$(document).ready(function() {
  $(".slide-out").each(function() { 
    var slideOut = $(this);  
    slideOut.bind("mouseenter",function(){
      slideOut.animate({"right": "+=80px"}, "slow");
    });   
    slideOut.bind("mouseleave",function(){
      slideOut.animate({"right": "-=80px"}, "fast");
    });    
  });
});

Hier das ganze Beispiel .. und hier das CSS dazu

In meinen Beispiel verwende ich CSS3 .. kann man natürlich auch ohne machen .. aber dann ists nicht so shiny.

Leave a Reply

Your email address will not be published. Required fields are marked *