Question

所以，我正在尝试创建一个网站，如果你点击一个链接，一个面板从侧面滑出。使用jQuery和css的更多信息

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

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

我对jQuery很新...所以，如果有人能提供帮助，那将非常感激。

Answer 1

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

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

$("#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
}

Answer 2

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

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);
}

将来，如果需要异步运行某些东西，现在可以使用callback（）。：）

使用单独的元素更改div的类onClick

2 个答案: