Проблемы с ползунком jQuery: две кнопки запутываются в состоянии - PullRequest
Новая
       14

Проблемы с ползунком jQuery: две кнопки запутываются в состоянии

3 голосов
/ 24 декабря 2009

Я создал слайдер с двумя возможными кнопками: одна на .toggle, эта всегда видна, а затем .click, которая видна только при открытом слайде, поэтому я хотел, чтобы он только закрывался. проблема в том, что вы открываете с помощью .toggle и закрываете с помощью .click, а затем пытаетесь снова открыть с помощью оригинальной кнопки .toggle. для этого нужно 2 щелчка мышью. 

<script type="text/javascript">

  $(document).ready(function(){

    $(".profile_slide_btn").toggle(

     function(){
       $("#sliding_header").animate({ 
         top: "0px"
       }, 300 );
     }, 

     function(){
      $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
  });

 $(".profile_slide_btn2").click(

     function(){
       $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
     });
  });

</script>

Спасибо за любую помощь !!

Ответы [ 2 ]

1 голос
/ 24 декабря 2009

Я думаю, что проблема в том, что тумблер запускает одну функцию, а затем другую, так как вы закрыли с помощью .click, но переключатель не знает, что, когда вы снова нажимаете .toggle, он пытается закрой сначала.

Возможно, придется изменить логику, чтобы переключать вручную, а не полагаться на функцию .toggle.

Редактировать : Так что-то вроде этого (обратите внимание, что это не проверено, и у вас могут возникнуть проблемы, когда щелчки по вещам во время анимации вызывают странность): 

<script type="text/javascript">

    $(document).ready(function(){

        $(".profile_slide_btn").click(
            function(){
                if ($("#sliding_header").css("top") == "0px") {
                    hideHeader();
                } else {
                    showHeader();
                }
            });

        $(".profile_slide_btn2").click(hideHeader);

        function showHeader() {
            $("#sliding_header").animate({ top: "0px" }, 300 );
        }

        function hideHeader() {
            $("#sliding_header").animate({ top: "-600px" }, 300 );
        }
    });

</script>
0 голосов
/ 24 декабря 2009

Это потому, что .toggle не знает, что слайдер был закрыт.

  1. Открыть с помощью toogle: 0px
  2. Закрыть с помощью клика: -600px
  3. Тоггл все еще думает, что вы собираетесь закрыться, поэтому: -600px снова

Используйте оператор if, чтобы узнать, когда верхнее свойство ползунка равно -600px, а когда 0, чтобы вы знали, когда закрывать, а когда открывать.

...