jQuery的1点击隐藏和显示左到右

Question

我想我的jQuery脚本点击隐藏和显示，DIV它隐藏的链接显示单词SHOW的时候，当它显示链接显示单词隐藏。

请你可以找我。

最好的问候。

$(document).ready(function() { 
    $('#hide').click(function(e) { 
     $('.DIV').delay(500).animate({ 
      marginLeft: '-100%', 
     }); 
     return false; 
    }); 

    $('#show').click(function(e) { 
     $('.DIV') .delay(500) .animate({ 
      marginLeft: '0%', 
     }); 
     return false; 
    }); 
}); 

Answer 1

一种方式做到这一点是toggle和动画left。您需要将position设置为relative才能将其滑动。

HTML

<div id="toggleDiv">hide</div> 
<div class="test">Some text</div>​ 

CSS

.test { 
position: relative; 
} 

jQuery的

$('#toggleDiv').toggle(function() { 
    $('.test').delay(500).animate({ 
     'opacity': 0, 
     'left': '-100%' 
    }); 
    $(this).delay(1000).queue(function(n) { 
     $(this).html('show'); 
     n(); 
    }); 
}, function() { 
    $('.test').delay(500).animate({ 
     'opacity': 1, 
     'left': '0%' 
    }); 
    $(this).delay(1000).queue(function(n) { 
     $(this).html('hide'); 
     n(); 
    }); 
});​ 

JSFiddl Ë
http://jsfiddle.net/dW8Rv/1