Question

我有一组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>

我试图向此脚本添加两个操作...

不是只显示：没有封面图片，我想在隐藏它们之前将它们向右滑动。我试过替换
```
 $(".otherContainers").css('display', 'none');
```
与
```
 $(".otherContainers").hide('slide',{direction: "right"}, 1000);
```
但它破坏了剧本？

其次，我想添加一个延迟的网址。在过去，我使用过像

这样的东西

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

附加到单独的按钮。当我尝试将其添加到覆盖隐藏内容的图像时，没有任何反应。

如何将这些功能添加到我正在使用的脚本中？谢谢你的任何线索！

Answer 1

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可能禁用了弹出窗口或其他内容。
我添加了一个替代的挤压动画（注释掉），我想也许你更喜欢它，只需选择你喜欢的那个。

将图像向右滑动，同时打开一个带有超时的新窗口URL

1 个答案: