Почему этот переключатель для (animate) не работает?

У меня есть этот toggle() для метода animate(), так что одним щелчком он переключит анимацию и все встроенные стили, а на альтернативном клике она удалит их и вернется в нормальное состояние. Однако, когда я добавляю код переключения, он больше не работает (т. Е. Он работает без переключения, но после первого нажатия не возвращается снова).Почему этот переключатель для (animate) не работает?

$("a").click(function() { 
    $("ul li").each(function (index) { 
     $("a").toggle(function() { 
      $("ul li").animate({ 
       'top': ((index + 1) * 31) + 6 + "px", 
       'opacity': '1' 
      }, 0); 
     }, function() { 
      $("ul li").animate({ 
       'top': '0', 
       'opacity': '0' 
      }, 0); 
     }); 
    }); 
});

Я думаю, я мог бы с помощью переключателя неправильно (я прочитал, что переключатель должен быть использован на элементе, который щелкнул, но я не уверен, если я получаю это право), а также я m не уверен относительно функции each(). Спасибо за любую помощь :)

источник

2013-04-24 Tom Oakley

Вы используете последнюю версию jQuery? (.toggle больше не связывает события кликов с 1.9) –

@KevinB Я использую 1.9.1 ... как еще я мог бы это достичь? :) –

@TomOakley использовать плагин migrate для этого с jQuery 1.9.1 .... :) – Jai

Это решение будет работать на вас. Просто скопируйте и вставьте весь этот код в один файл html, а затем проверьте его.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
ul li { 
    position: absolute; 
    opacity: 0; 
} 
</style> 
</head> 

<body> 
<ul> 
    <li>Lorem Ipsum 1</li> 
    <li>Lorem Ipsum 2</li> 
    <li>Lorem Ipsum 3</li> 
</ul> 
<a href="#" t="0">Click me</a> 

<script type="text/javascript"> 
$("a").click(function() { 
if($(this).attr("t")=="0"){ 
$(this).attr("t","1"); 
    $("ul li").each(function (index) { 
     $(this).animate({ 
      'top': ((index + 1) * 31) + 6 + "px", 
      'opacity': '1' 
     }, "slow"); 
    }); 
    }else 
    { 
     $(this).attr("t","0"); 
     $("ul li").each(function (index) { 
     $(this).animate({ 
      'top': "0px", 
      'opacity': '0' 
     }, "slow"); 
    }); 
    } 
}); 


</script> 


</body> 
</html>

источник

2013-04-24 18:15:39 Aditya

Хотя это действительно работает, и это потрясающе, это немного грязно ... Я уверен, что это можно сделать проще и с меньшим количеством кода, чем это. Спасибо, в любом случае! :) P.S - Надеюсь, вы не против, но я немного очистил ваш код, чтобы сделать его более читаемым. Также обновил jsfiddle - http://jsfiddle.net/6S3gz/1/ :) –

его штраф, у меня нет никаких проблем ... – Aditya

Почему этот переключатель для (animate) не работает?

ответ

Смежные вопросы