向右滑动一个图像，同时打开一个超时的新窗口url

Sliding an Image to the right, while opening a new window url with timeout

本文关键字：一个 超时 新窗口 url 窗口 图像      更新时间：2023-09-26

我有一组div，其中包含被图像覆盖所隐藏的内容。我有这样的代码，它设置display:none到图像来显示隐藏的内容。

<div style="display: inline-block; position: relative;left:600px;">
    hidden content
    <img src="01.jpg" class="otherContainers" style="position:absolute;top:0;left:0;">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
    $(window).load(function(){
        $(".otherContainers").click(function () {
             $(".otherContainers").css('display', 'none');
        });
    });
</script>

我正试图在这个脚本中添加两个操作。。。

  1. 不只是显示：没有封面图像，我想在隐藏它们之前将它们向右滑动。我试过更换

     $(".otherContainers").css('display', 'none');

    带有

     $(".otherContainers").hide('slide',{direction: "right"}, 1000);

    但它破坏了剧本？

  2. 其次，我想添加一个延迟的url打开。过去我用过类似的东西

    <a onclick='"setTimeout('window.open(''THEURL'')', 8000);'" rel='nofollow'>button img</a>

附在一个单独的按钮上。当我尝试将它添加到覆盖隐藏内容的图像中时，什么也没发生。

如何将这些函数添加到我正在使用的脚本中？感谢提供任何线索！

hide("slide",...)是jQuery UI的一部分（尽管我不确定slide是否存在于API中）。

试试这个：

$(window).load(function(){
  $(".otherContainers").click(function (){
    $(".otherContainers").each(function(){
      $(this).animate({left:'+='+$(this).width()},500,function(){$(this).hide()});
      //alternative squeezing animation
      //$(this).animate({width:0,height:$(this).height(),left:'+='+$(this).width()},500,function(){$(this).hide()});
    });
    setTimeout(function(){window.open('http://api.jquery.com/animate/');},2000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:inline-block; position:relative; left:60px;">
  hidden content
  <img src="http://placehold.it/200x200&text=image" class="otherContainers" style="position:absolute; top:0; left:0;" />
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="display:inline-block; position:relative; left:60px;">
  hidden content
  <img src="http://placehold.it/300x150&text=image" class="otherContainers" style="position:absolute; top:0; left:0;" />
</div>
（小提琴：http://jsfiddle.net/b66ujfoh/5/）

  • 这首先设置图像的动画，使其向右滑动一段与其自身宽度相当的距离
  • 动画完成后，将执行完整的功能，其中隐藏图像
  • 在动画代码中，500（ms）是动画的持续时间，可以根据需要更改
  • .each(function(){使用class="otherContainers"对每个元素进行迭代，因此单击该类的任何一个图像都会导致所有图像滑动和隐藏
    （它还确保每个图像的滑动距离与其自身宽度相同，而不是单击图像的宽度。）
  • 延迟的window.open()在代码片段中似乎不起作用，但在jsfiddle中，StackOverflow可能禁用了弹出窗口或其他什么
  • 我添加了一个替代的挤压动画（评论掉了），我想也许你更喜欢它，只要选择你喜欢的
相关文章：