1

因此，我正在尝试创建一个站点，如果您单击链接，则面板会从 w 侧滑出。使用 jQuery 和 css 的更多信息

面板是一个绝对位置的 div，并且移动到屏幕外。单击链接时，我希望面板移动到位。本质上，我想更改该 div 的类，以便绝对定位将 div 移动到屏幕中......

所以，我知道如何装配一个 div 或让它改变它自己的类，但我不知道如何将一个连接到一个单独的 div 以便它控制 div。我也不确定要添加哪些功能，以便它滑入到位而不是仅仅出现......

我对 jQuery 很陌生……所以如果有人能提供帮助，将不胜感激。

4

2 回答 2

2

最简单的方法是为其位置或边距/填充设置动画。

您挂钩作为触发器的对象：

$("#trigger").click( function(){
});

当点击时，使用重新定位元素.animate()

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
    $("#trigger").click( function(){
        // Adjust the effect (2000 miliseconds)
        $("#moreinfo").animate( { opacity: 1.0, left: 0 }, 2000 ); 
    });
});
</script>

然后在某处的 CSS 中，我们最初将元素隐藏在远离屏幕的地方。

#moreinfo {
 position: absolute;
 top: 5px;
 left: -2000px; // You can adjust based upon the actual dimensions of the object
}
于 2012-09-29T23:41:47.600 回答
0

您将需要使用 jQuery 的动画功能，或者您可以简单地在常规 javascript 中执行此操作，并onclick=在您想要控制滑动面板的 div 上附加这样的事件：

function slide(slider, data, step, callback) {
  slider.style.left = data+"px";
  data += step;
  if(dataIn <= data && data <= dataOut) {
    setTimeout(function() { slide(slider,data,step,callback) }, 15);
  } else if(callback && (typeof(callback) == 'function')) { 
    callback();}
}

而这样，你可以简单地在你想要点击滑动的 div 上设置事件：

function click() {
  var data = 0;
  var step = 15;
  var slider = document.GetElementById("sliderDiv");
  slide(slider,data,step);
}

将来，如果您需要异步运行某些东西，您现在可以使用回调（）。:)

于 2012-09-29T23:42:32.980 回答