0

好的，诚然，这是我第一次使用 java 脚本和 jQuery。我正在尝试显示一个<p> </p>标签，将其淡出，然后淡入另一个。淡出部分工作得很好，但之后其他标签不显示。您可以看到容器的边框更改大小以适应更大的文本区域，但您看不到文本。第 22-23 行是文本应该淡入的地方。我查看了 jQuery 文档，但似乎找不到原因。我尝试将.css调用放在表达式的前面，但我得到的只是文本弹出而不是淡入。我从网上的一个来源得到了这个想法，并试图改变它以适应我的需要。正如你现在看到的那样，我最终重写了整个内容。这是我的代码。

// JavaScript Document
var i = 1;
$(document).ready(function () {
    jQuery.fn.timer = function () {
        var $quote = $('#quote')
        var number = $('#quote').children('p');
        $quote.children('p').eq(i - 1).animate({
            opacity: 0
        }, 1000, function () {
            $quote.children('p').eq(i - 1).css({
                'display': 'none',
                'visibility': 'hidden'
            });
        }).delay(1000);
        i++;
        if (i > number.length) {
            i = 1;
        }
        $quote.children('p').eq(i - 1).animate({
            opacity: 100
        }, 1000, function () {
            $quote.children('p').eq(i - 1).css({
                'display': 'block',
                'visibility': 'visible'
            });
        });
    };
    window.setInterval(function () {
        $('#quote').timer();
    }, 10000);
});

我的带有样式的 html 如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery_V_1.9.1.js"> </script>
<script type="text/javascript" src="quotes_3.js"> </script>
<style>
#quote{
    background: white;
    border: 2px solid #333;
    display: block;
    margin: 0 auto;
    padding: 10px;
    width: 100px;
}

#quote p{
    color: #333;
    display: none;
    font-weight: bold;
    text-align: center;
    display: none;
    visibility: hidden;

}

#quote p:first-child{
    display: block;
    visibility: visible;

}
</style>
</head>

<body>

    <div id="quote">
    <p> Funny stuff happens with Java script </p>
    <p> this is turning out to be more work than I thought it would be!!</p>
    <p> I like Java more!!</p>
    </div>

</body>
</html>

任何想法，将不胜感激。我在 6 小时前开始使用无法编译的东西。好像我可以制作一个动画 gif 来获得相同的效果，哈哈。

（编辑）我终于得到了要显示的文本，但是没有淡入效果。但是容器正在增长以容纳所有三个<p> </p>标签。为什么是这样？

4

4 回答 4

3

jQuery 已经具有fadeOut和fadeIn功能。无需重新发明轮子。

$(document).ready(function(){

    var quote = "Another quote!";

    $("#quote").text().fadeOut(1000);
    $("#quote").text(quote).fadeIn(1000);

}

更新：

如果你想同时做动画和淡化，试试这个：

$("#quote").animate({ opacity: 1, top: "-10px" }, 'slow');

但是，这似乎不适用于 display: none 元素（如 fadeIn 一样）。所以，你可能需要事先把这个：

$("#quote").css('display', 'block');
$("#quote").animate({ opacity: 0 }, 0);
于 2013-03-01T21:47:07.673 回答
2

我分解了您的代码，并对其进行了优化以产生我认为您正在寻找的效果。我相信这可能是您正在寻找的功能，尽管我觉得您的问题可以更清楚地说明；(1:desired-functionality; 2:current-efforts; 3:quandary-details)

我已经为您创建了这个 JSFiddle，并认为它代表了您正在寻找的功能。

我生成的 JavaScript 通过以下方式重新创建我对您所需效果函数的解释：淡化所有引用内容，然后淡入“active_quote”，随着我们的前进，谁的索引被相应地设置。

$(function(){
    var $quotes=$('#quote>p');
    var quote_lifetime = 3*1000;
    var quote_fadetime = 200;
    //--------
    var active_quote=0;
    var number_of_quote_innards=$quotes.length;
    function displayActiveQuote(){
        $quotes.fadeOut(quote_fadetime); // Fade out all quote contents
        setTimeout(function(){ // After fadeOut'ing everything, we fade in the active quote.
            $( $quotes[active_quote] ).fadeIn(quote_fadetime);
            active_quote++; // incrementing the active_quote, and resetting it to zero if it's exceeded its bounds.
            if (active_quote > number_of_quote_innards-1) active_quote=0;
        },quote_fadetime);
    }
    displayActiveQuote();
    setInterval(displayActiveQuote,quote_lifetime);
});

然后我对 CSS 进行了核对，因为它不再与此功能相关。您可以随意设置此引号框的样式 - 但请注意，对于引号之间的确切时刻，可以使用min-height来显示高度的无限小故障，因为两个引号可见，或者没有引号可见，对于单帧。为了解决这个问题，我建议改用固定height。

//追赶。

编辑：使用 jQuery 的 animate() 进行渐变和滑动

此编辑解决了 Craig 对同时滑动和淡入淡出功能的渴望。

我已经为你更新了这个 JSFiddle。

在 JavaScript 中，我将这fadeOut&&fadeIn对更改为animate({opacity:0,height:0},quote_fadetime), 和animate({opacity:1,height:'100%'},quote_fadetime)，以及其他一些内容以适应这种情况。

（更新代码）：

$(function(){
    var $quotes=$('#quote>p');
    var quote_lifetime = 3*1000;
    var quote_fadetime = 800;
    //--------
    var active_quote=0;
    var number_of_quote_innards=$quotes.length;
    function displayActiveQuote(){
        $quotes.animate({opacity:0,height:0},quote_fadetime); // all quotes disappear
        setTimeout(function(){
            $($quotes[active_quote]).animate({opacity:1,height:'100%'},quote_fadetime); // active quote appears
            active_quote++; // here we increment the active_quote, and reset it to zero if it's exceeded its bounds.
            if (active_quote > number_of_quote_innards-1) active_quote=0;
        },quote_fadetime);
    }
    displayActiveQuote();
    setInterval(displayActiveQuote,quote_lifetime);
});

我想指出，使用了 setTimeout，而不是 jQuery animate 的完成回调，因为在这种情况下，动画完成回调将触发 3 次，每次动画结束时触发一次。我们只希望这种情况发生一次，以淡入活跃的报价。

这是CSS：

#quote {
    width:50%;min-width:210px;
    height:6em; overflow:hidden;
    padding:0.5em 1em; margin:0 auto;
    /*----*/
    border:2px solid #CCC; font-style:italic; 
    color:#555;border-radius:8px; }
    #quote>p {
        opacity:0; height:0; margin:0; }

干杯，克雷格！//追赶。

于 2013-03-01T22:20:49.643 回答
1

这是一种涉及更少代码的方法（演示）

$(document).ready(function () {
    $("#quote p").each(function(index) {
        $(this).delay(5000*index).fadeIn(300);
    });
});

不比@aguyfromhere 少很多：P

于 2013-03-01T21:51:18.983 回答
0

display: block; visibility: visible; 在将不透明度设置为 100之前，您必须进行设置。否则，您正在为不可见元素的不透明度设置动画。

于 2013-03-01T22:06:19.183 回答