Fixieren von Text mit fadeToggle() in JQuery

Question

Ich versuche fadeToggle() zu verwenden, um Text aus einem Array einzublenden, 10 Sekunden zu warten, dann für einen anderen Text auszublenden, um dasselbe zu tun.

Dieser Code wird der Text alle paar Sekunden perfekt wechseln, ich kann einfach nicht den richtigen Code bekommen, um es verblassen in/out:

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \” The value of an idea lies in the using of it. \“ <br /> ~ Thomas Edison "]; 
 
var count = 0; 
 

 
$(document).ready(function() { 
 
    function changeText() { 
 
    $(".quote").html(texts[count]); 
 
    count < texts.length ? count++ : count = 0; 
 
    } 
 

 
    setInterval(changeText, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="quote">Hello</h1>

Answer 1

Sie können diese Logik folgen :

1. Ausblenden.
2. Ändern Sie den Text.
3. Fade in.

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \” The value of an idea lies in the using of it. \“ <br /> ~ Thomas Edison "]; 
 
var count = 0; 
 

 
$(document).ready(function() { 
 
    function changeText() { 
 
    $(".quote").fadeOut(250, function() { 
 
     $(this).html(texts[count]).fadeIn(250); 
 
    }); 
 
    count < texts.length ? count++ : count = 0; 
 
    } 
 
    setInterval(changeText, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="quote">Hello</h1>

Answer 2

Um Cross-Fade-in Text müssen Sie sie in getrennten Elementen setzen und verblassen sie in/out je nach Bedarf. Sie können keine Überblendung erzielen, indem Sie einfach die Eigenschaft text eines Elements ändern.

In diesem Sinne können Sie die h1 Elemente innerhalb eines Contained platzieren und sie so positionieren, dass sie sich überlappen. Sie können dann verkettete setTimeout Aufrufe verwenden, um den benötigten Inhalt zu verblassen. Versuchen Sie folgendes:

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \” The value of an idea lies in the using of it. \“ <br /> ~ Thomas Edison "]; 
 
var count = 0; 
 

 
$(document).ready(function() { 
 
    function changeText() { 
 
    $('.quote').fadeOut(function() { 
 
     $(this).remove(); 
 
    }); 
 
    $('<h1 class="quote">' + texts[count % texts.length] + '</h1>').appendTo('.quote-container').fadeIn(); 
 
    count++; 
 
    setTimeout(changeText, 3000); 
 
    } 
 

 
    changeText(); 
 
});

.quote-container h1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quote-container"> 
 
    <h1 class="quote">Hello</h1> 
 
</div>

Beachten Sie auch die Verwendung des Modulo-Operator (%) über den ternären den count Wert zu überprüfen.

Answer 3

Ein anderer Ansatz.

Ich verstehe, dass die Frage nach jQuery fadeToggle() fragt, aber ich würde vorschlagen, dass CSS @keyframes ist wahrscheinlich das beste Werkzeug für diese Art von animierter Präsentation.

Arbeitsbeispiel mit CSS:

var texts = [ 
 
    " \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", 
 
    " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", 
 
    " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", 
 
    " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", 
 
    " \" The value of an idea lies in the using of it. \" <br /> ~ Thomas Edison " 
 
]; 
 

 

 
var count = 0; 
 
var quote = document.getElementsByClassName('quote')[0]; 
 

 
function changeText() { 
 
    quote.innerHTML = (texts[count]); 
 
    count < (texts.length - 1) ? count++ : count = 0; 
 
} 
 

 
setInterval(changeText, 6000);

.quote { 
 
animation: fadeToggle 6s infinite; 
 
} 
 

 
@keyframes fadeToggle { 
 
0% {opacity: 0;} 
 
33% {opacity: 1;} 
 
66% {opacity: 1;} 
 
100% {opacity: 0;} 
 
}

<h1 class="quote">Hello</h1>