滑动后无法将 div 移回原始位置

Question

我的滑动切换有问题。单击后的黑框将第二个 div 向后滑动，这很好，但它本身不会滑回原来的位置。我怎样才能解决这个问题？

我目前正在使用 Jquery UI。

代码如下：

#recommended-product-block{
    position: absolute;
    top:225px;
    right:0;
    z-index: 999999;
    width:100px;
}
#weather{
    width:150px;
    position:absolute;
    right: 0;
}

<div id="recommended-product-block">
    <h1>Div box to initiate slide toggle</h1>
</div>

<div id="weather">
    <h1>Box that slides in and out</h1>
</div>

$(document).ready(function() {

    $('#weather').hide();

    $(function () {
        $("#recommended-product-block").click(function () {
            $(this).animate({ right: '+150' }, 400 );
            $( "#weather" ).toggle( "slide" );
        });
    });

});

Answer 1

如果您要在两个<div> 标签之间切换，那非常简单。第一个 div 将被隐藏。单击第二个 div 时，第一个 div 会滑动，第二个会消失。单击第一个 div 时，第二个 div 会滑动，第一个会消失。

$('#weather').hide();

$(function () {
    $("#recommended-product-block").click(function () {            
        toggle();
    });

    $("#weather").click(function () {            
        toggle();
    });
});

function toggle(){
    $( "#weather" ).toggle('slide');
    $( "#recommended-product-block" ).toggle('slide');
}

Fiddle

（为清楚起见添加了边框）

编辑：

要控制速度，请使用此切换功能

function toggle(){
    $('#weather').toggle('slide', {direction:'left'}, 300);
    $( "#recommended-product-block" ).toggle('slide', {direction:'left'}, 300);
}

编辑（基于评论）

$('#weather').hide();

$(function () {
    var notClicked = true;

    $("#recommended-product-block").click(function () { 

        $( "#weather" ).toggle('slide', 400);

         if(notClicked) {
            $(this).animate({'right':150}, 400);  
          }
          else
          {
             $(this).animate({'right':0},400);
          }

          notClicked = !notClicked;        
    });

 });

Updated Fiddle