Question

我刚开始学习jQuery，我正在尝试研究如何让广告淡出某些内容，然后在点击按钮时消失。简单地说，我只是尝试淡入图像，然后在单击按钮时将其淡出。此外，如果有人可以告诉我如何让它向上滑动并且稍微消失之后会很有用，这将是很好的。我将不胜感激任何帮助。

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
$("document").ready(function() {
                    $('#ad').delay(2000).fadeIn('slow');

                $('continue').click(function() {
                    $('#ad').fadeOut('normal');
            });
        });

和HTML

<img id="ad" src="images/nameofimage.jpg" alt="" width="165" height="100" /> 
    <button id="continue">Continue</button>

Answer 1

哪部分不起作用？

我注意到的第一件事就是在继续之前错过了＃;

$('#continue').click(function()

Answer 2

要淡入#ad，需要先隐藏它。您可以在链上添加它，如下所示：

$('#ad').hide().delay(2000).fadeIn('slow');

这将在DOM准备好时隐藏对象，等待2秒，然后淡入。

虽然你可以用更强大（和复杂）的.animate（）方法实现滑动效果：

$('#ad').css("opacity", 0).delay(2000).animate({ marginTop: "-=10", opacity: 1}, 500);

这会将对象的不透明度设置为0，等待2秒，同时淡入并将对象向上移动10个像素。但是，随着链条的出现，这有点冗长。

另外值得注意的是，将不透明度设置为0将使其保持在文档流中，其中.hide（）等效于display：none;

是的，正如Matt Tew上面所说，你忘记了点击处理程序中的哈希值。

Answer 3

如果您在初始阶段没有隐藏图像，即使您的功能正常工作，用户也不会看到任何效果。因此，使用display:none css规则或hide()函数首先隐藏它并使用fadeIn（）效果。

$("document").ready(function () {
    $('#ad').hide().delay(2000).fadeIn('slow');

    $('#continue').click(function () {
        $('#ad').fadeOut('normal');
    });
});

continue也应该是id或class或元素。由于没有这样的元素，请指定它是-id或class的类型。

Answer 4

这里有几个问题。

代码想要以淡入已经可见的元素开始。尝试先将其隐藏，然后淡入
'continue'选择器缺少'＃'前缀以使其成为id

更新代码

$("document").ready(function() {
    $('#ad').hide();
    $('#ad').delay(2000).fadeIn('slow');

    $('#continue').click(function() {
        $('#ad').fadeOut('normal');
    });
});

小提琴：http://jsfiddle.net/w2Ycy/

为什么我的简单jQuery淡入/淡出脚本不起作用？

4 个答案: