2012-03-30 13 views
1

gerade jetzt habe ich ein div mit einer id von "sidebar" und ich benutze css, um eine hover-klasse hinzuzufügen, um eine kugel zu den links auf hover hinzuzufügen. Das Problem ist, dass ich nicht möchte, dass die Kugel zwischen den Links in der Seitenleiste "springt". Ich möchte, dass die Kugel Ihrem Cursor auf einer y-Achse folgt, wenn Sie die Seitenleiste betreten. Wie kann ich das mit jquery machen?springen zu element animation

html

<div id="sidebar"> 
      <dl class="nice vertical tabs"> 
        <dd><a href="#BiblesandCommentaries">الانجيل-تعليقات</a> </dd> 
        <dd><a href="#EnquirersLibrary">الاستفسارات</a> </dd> 
        <dd><a href="#NewBelievers">مؤمنون جدد</a> </dd> 
        <dd><a href="#ChristianLiving">حياة المسيحى</a> </dd> 
        <dd><a href="#FamilyLibrary">مكتبة الأسرة</a> </dd> 
        <dd><a href="#YoungAdultLibrary">مكتبة الشباب</a> </dd> 
        <dd><a href="#WorshipLibrary">مزامير وتراتيل</a> </dd> 
        <dd><a href="#BibleTeachings">التدريس</a> </dd> 
        <dd><a href="#Leadership">القيادة</a> </dd> 
        <dd><a href="#SchoolofChrist">مدرسة الإنجيل</a> </dd> 
        <dd><a href="#MinorityLanguages">فهم المسيح</a> </dd> 
      </dl> 
     </div> 

css

#sidebar .tabs a:hover:after { 
-webkit-transition: all 1s ; 
-moz-transition: all 1s ; 
-ms-transition: all 1s ; 
-o-transition: all 1s ; 
transition: all 1s ; 
content: ""; 
display: block; 
width: 0; 
height: 0; 
border-top: 5px solid transparent; 
border-left: 10px solid white; 
border-bottom: 5px solid transparent; 
position: relative; 
bottom: 5px; 
margin-left: -20px; 
} 
+0

nicht verstehen, „nicht die Kugel erscheinen soll auf die„Links überspringen‘zwischen“ können Sie legte es in eine Geige? – lzdt

+0

Es erscheint auf dem Hover eines Links, wird aber verschwinden, bis der nächste Link schwebt. Ich möchte, dass die Kugel immer sichtbar ist, wenn Sie das div mit der ID "sidebar" eingeben, aber Ihrer Maus auf einer y-Achse zu folgen scheinen. – Blainer

+0

Sie haben die Frage mit CSS markiert, aber uns nicht gezeigt. Das könnte helfen. – Kyle

Antwort

0

sehen die Geige für Code und Demo

Geige: http://jsfiddle.net/XcfhH/1/

Demo: http://jsfiddle.net/XcfhH/1/embedded/result/

+0

das ist was ich jetzt habe. Ich möchte, dass es das tut, aber eine Übergangsanimation, wenn Sie zum nächsten Element schweben. – Blainer

+0

Ich verstehe nicht, was du erzählst. Bitte erarbeite es ein wenig. Zuvor hat Ihr Menü Störungen gezeigt, als wir auf Anker-Tag hoben, ich reparierte es in Geige http://jsfiddle.net/XcfhH/1/ aber wissen, was Sie wollen, ich bin ein bisschen verwirrt. – w3uiguru

Verwandte Themen