проблема анимации jQuery - PullRequest
Новая
       49

проблема анимации jQuery

0 голосов
/ 25 июня 2011

Я делаю скрытый div, который начинается на краю экрана, а затем скользит вправо при нажатии на вкладку.Эта часть функционирует, как и ожидалось, но когда я нажимаю на вкладку, чтобы она сдвинулась назад, она этого не сделает ... какие-либо идеи?

JS: 

$( "#closediv" ).hide();
$( "#opendiv" ).click( function(){
    $( "#opendiv" ).animate(
        { left: "+=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#opendiv" ).hide();
            $( "#closediv" ).show();
        }
    );
});

$( "#closediv" ).click( function(){
    $( "#closediv" ).animate(
        { left: "-=100px" },
        "easeOutExpo",
        700,
        function(){
            $( "#opendiv" ).show();
            $( "#closediv" ).hide();
        }
    );
});

CSS: 

#closediv
  {
   display: block;
   width: 30px;
   height: 95px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/closediv.png') bottom;
  }

#closediv:hover
  {
   background-position: 0 0;
  }

#opendiv
  {
   opacity: 0.6;
   display: block;
   width: 30px;
   height: 95px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/opendiv.png') bottom;
  }

#opendiv:hover
  {
   background-position: 0 0;
  }

HTML: 

<div id="opendiv" style="position:absolute; top:0px; left:0px; z-index:2;">
</div>
<div id="closediv" style="position:absolute; top:0px; left:100px; z-index:2;">
</div>

Извините за мой стиль отступа "block" (модифицированный K & R),Мне легче следовать, чем стиль отступа BSN KNF, который используют большинство людей ... = P

Редактировать: Тестовая страница

Ответы [ 2 ]

2 голосов
/ 25 июня 2011

Вы случайно не переключили 700 and "easeOutExpo" в функции анимации # closediv? Если вы переключите их, div, кажется, сдвинется назад, но когда появится #opendiv, он вернется слева: 100 Чтобы исправить это, вы можете использовать: 

$("#closediv").hide();
$("#opendiv").click(function(){
    $(this).animate({ left: "+=100px" }, 700, "easeOutExpo",function() {
    $(this).hide();
    $("#closediv").show().css('left', 100);
    });
});

$("#closediv").click(function(){
    $(this).animate({ left: "-=100px" }, 700, "easeOutExpo", function() {
    $("#opendiv").css('left', 0).show();
    $("#closediv").hide();
    });
});

Вот ссылка JSFiddle: http://jsfiddle.net/RWnqW

1 голос
/ 25 июня 2011

Вы можете быть более динамичным, используя: http://jsfiddle.net/BqJeg/5/

$( "#closediv" ).hide();
$( "#opendiv" ).click( function(){
    $( "#opendiv" ).animate(
        { left: "+=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#closediv" ).css('left', $( "#opendiv" ).css('left'));
            $( "#opendiv" ).hide();
            $( "#closediv" ).show();
        }
    );
});

$( "#closediv" ).click( function(){
    $( "#closediv" ).animate(
            { left: "-=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#opendiv" ).css('left', $( "#closediv" ).css('left'));
            $( "#opendiv" ).show();
            $( "#closediv" ).hide();
        }

    );
});
...