如何使div滑入jQuery位置 [英] How to make a div slide into place jQuery

问题描述

我试图在函数被调用时将< div> 滑入屏幕。此时，我拥有它，所以点击时它会出现在屏幕上。任何人都知道如何让它滑入？如果它可以滑出，它将是一个很好的加号。

Javascript：

  function show（）{
 var website = document.getElementById（'website'）; 
 website.style.left ='0％'; 
} 
  

HTML：

 < a href =javascript :; onclick =show（）style =color：＃999;>超人 - 维基百科，自由的百科全书< / a> 
< div id =website> 
 
< / div> 
  

CSS：

  #website {
 height：100％; 
位置：固定; 
背景：＃666; 
宽度：100％;剩余
：100％; 
 
  

解决方案

检查这个DEMO http://jsfiddle.net/yeyene/TLtqe/

<

  $（'a'）。on（'click'，function（ ）{
 if（$（'＃website'）.css（'left'）=='0px'）{
 $（'＃website'）。animate（{left：'-100％ '}，1000）; 
} else {
 $（'＃website'）。animate（{left：0}，1000）; 
} 
}）; 
  

I am trying to make a <div> slide into the screen when a function is called. At this moment, I have it so it will appear on the screen on click. Anyone know how to make it slide in? *would be a great plus if it could slide out also.

Javascript:

function show() {
    var website = document.getElementById('website');
    website.style.left = '0%';
}

HTML:

<a href="javascript:;" onclick="show()" style="color:#999;">Superman - Wikipedia, the    free encyclopedia</a>
<div id="website">

</div>

CSS:

#website {
    height: 100%;
    position: fixed;
    background: #666;
    width: 100%;
    left: 100%;
}

解决方案

Check this DEMO http://jsfiddle.net/yeyene/TLtqe/

It will slide in and also slide out.

$('a').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-100%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

这篇关于如何使div滑入jQuery位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！