jQuery - слайд строки текста, открытого и закрытого (слева и справа) - PullRequest
Новая
       16

jQuery - слайд строки текста, открытого и закрытого (слева и справа)

0 голосов
/ 30 августа 2011

Вариации на этот вопрос уже задавались, но не это конкретно.

У меня есть несколько строк текста, как показано ниже: 

#item {margin-left: 100px;}

<div class="item">Happy to Know You.</div>
<div class="item">Glad to Know You.</div>
<div class="item">Sad to Know You.</div>

Мне нужен код jQuery, который позволит мне вставлять текст на страницу и обратно при наведении курсора. 

   $(".item").mouseover(function(){
     $(".item").animate({"marginLeft": "-=100px"}, "slow");
        });

Насколько я могу судить, это хорошо работает для одного элемента, но у меня есть список из 20 или 30 таких терминов, и я не хочу, чтобы они все перемещались. Я не знаю, как это повторить, чтобы написать один раз и заставить его работать для каждого элемента в отдельности. Вы можете помочь?

Ответы [ 2 ]

2 голосов
/ 30 августа 2011 
   $(".item").mouseenter(function(e){
       e.stopPropagation();
     $(this).stop(true,true).animate({"marginLeft": "-=100px"}, "slow");
        });

http://jsfiddle.net/dc47b/

или, может быть, вы хотите это 

   $(".item").hover(
   function(e){
        e.stopPropagation();
        $(this).stop(true,true).animate({"marginLeft": "-=100px"}, "slow");
   },
   function(){
       $(this).stop(true,true).animate({"marginLeft": "+=100px"}, "slow");
   });

http://jsfiddle.net/dc47b/2/

0 голосов
/ 30 августа 2011

Я думаю, возможно, вы хотите 

$(this).animate({"marginLeft": "-=100px"}, "slow");

вместо 

$(".item").animate({"marginLeft": "-=100px"}, "slow");

Обратите внимание, что внутри метода mouseover () мы используем $(this) для нацеливания только на один элемент, который был наведен поверх, а не на каждый элемент с классом item.

...