I'm building a random quote generator and would like to use the fadeIn/fadeOut function when switching between quotes when prompted by a button click. However I'm not sure how to target the text in jQuery, since I am printing the array directly from Javascript like this:
$('.show-quote').text(randomQuote);
Here is the project so far:
http://codepen.io/biancalelei/pen/vLeJVd
I think this is what you want: http://codepen.io/anon/pen/GoMGQL
$('.show-quote').fadeOut(300, function(){
$(this).text(randomQuote).fadeIn(300)
});
First, it will fade out in 300ms. When it is done the attached function will be executed. It changes the text and then fades it back in.
If you don't want the background to fade out as well, you can put the text in extra <div>: http://codepen.io/anon/pen/OMxEvK
You can use $('.show-quote').fadeIn() and $('.show-quote').fadeOut()
You can try this, first fadeOut 300ms and then fadeIn 300ms after that text print
$('.show-quote').fadeOut(300).fadeIn(300).text(randomQuote);
You can chain jQuery functions to achieve the functionality. Something like this:
$('.show-quote').hide().html(randomQuote).fadeIn(1000);
CodePen: http://codepen.io/anon/pen/wMrXyv
Related
I have this little script for add differents parts of code to the body in website
WincontentBody=jQuery("<div class='wd_"+idw+"'id='win_container'>OK</div>");
WincontentBody=jQuery("</div>");
jQuery(WincontentBody).fadeIn(3000).appendTo('body');
I try to add code from WincontentBody to body but it doesn't work, some kind of error i have in syntax, because never show div
I think this it's fine but I can't find the problem, the idea it's to add all contents from the variable WincontentBody to the body
Is it possible to do this? Because i can't make it to work
Thank´s in advanced
I went ahead and wrote your question properly for you. Take a look at SO in Spanish.
fadeIn and appendTo are jQuery methods. WincontentBody contains a string. You should first create a new jQuery object with your html.
$(WincontentBody).appendTo('body').fadeIn(3000); //first append, then fade in
If the fadeIn doesn't seem to work, it's probably because you will have to hide the elements (with some css) before inserting them into the page. Otherwise you'll be trying to fade in something that's already visible.
And I don't know if your code is actually formatted like that or it just got wrapped here, but you can't have multiline strings, unless you end each line with \.
Now (after your edit), you are creating two jQuery objects. One with the div and the other with nothing valid.
WincontentBody=jQuery("<div class='wd_"+idw+"'id='win_container'>OK</div>");
//WincontentBody now has the div
WincontentBody=jQuery("</div>");
//WincontentBody now has nothing. The </div> is not being appended to what was in WincontentBody before, you're assigning a new value to it
jQuery(WincontentBody).fadeIn(3000).appendTo('body');
//You're appending WincontentBody (which has nothing valid) to the body
//Also, WincontentBody is already a jQuery instance, no need to call jQuery() again
What you should do is to create your WincontentBody with the html code, as you had before, and then use $(WincontentBody)... or jQuery(WincontentBody).... Or put the whole html code in a single jQuery element like:
var WincontentBody=jQuery("----all the html code at once----");
WincontentBody.appendTo("body").fadeIn(3000);
Try this.
$(document).ready(function() {
WincontentBody = "<div class='wd_asdfas'id='win_container'>OK This is fine.</div>";
$('.displayHere').append(WincontentBody);
$('.displayHere').fadeIn(3000);
});
body { background: #eee }
.displayHere { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div class="displayHere">
Hello Buddy
</div>
</body>
Updated
I had made few changes.
I add the div named displayHere. I don't think it is good idea to
give the fade effect to body of the webpage.
In jquery I split the functions to two different functions. Firstly it will update the details and then it will fade in.
I am close to finishing a project but there is only one thing that I can't get to work, and that is how to animate this function:
$('.box').click(function(){
var description = $(this).find('.hide').text();
$('.description').text(description);
});
So what you see here is that I get a text from an element and place it into another element. But it is really rough it's just 'pop' and there it's. I tried serval things like putting .fadeIn() into the chain. Also I was thinking about doing it inside .animate() but I couldn't find a way to put it in. So my question is: Is there a way to animate this? or is it just simply not possible?
Thanks in advance :D
while making a simple random quote machine (part of a coding course I'm attending), I ran into a problem while trying to fade out an element in my HTML, that should then add some new HTML in it and fade it in. Here's the code:
$(".quote-text").fadeOut(function() {
$(this).html("<p>" + quotes[currentQuoteNum] + "</p>").fadeIn();
});
The quotes[currentQuoteNum] just refers to a list of quote strings I have. For some reason, neither the fadeIn or fadeOut functions do not animate correctly. The delay is there before my HTML is updated with a new quote, but the animation is not displayed. Now, if I remove the p element like so:
$(".quote-text").fadeOut(function() {
$(this).html(quotes[currentQuoteNum]).fadeIn();
});
Then it works and both the fadeIn and fadeOut animations are played. I need to have the p element in there, because inside them I'm adding another two elements to create quotation marks around my quote using a special styling class. I omitted those for simplicity. I know there are other ways but I want to know why this is happening.
Obviously this has something to do with adding tags to my HTML, but I have not been able to find out what it is. Please explain?
Code looks fine to me, should not be an issue.
Here is a codepen and it works as it should
Fade codepen
$(".quote-text").fadeOut(function() {
$(this).html("<p>" + "Oh Good"+ "</p>").fadeIn();
});
why not check the content of your variable.Probably its not well formatted
Try this change
$(".quote-text").fadeOut(2000, function() {
$(this).text(quotes[currentQuoteNum]).fadeIn(2000);
});
I just removed the inner <p> tag and replaced html() with text()
Here's working code pen http://codepen.io/anon/pen/wMgWvR
I have a bizzare problem which I have been trying to resolve. Its very basic but I just don't get it. Here it is. I am using JQuery to animate a simple display of a div element to a "block" from "none." I tried the following two options:
$('#fort_link').click(function(){
$('#fort_content').animate({'display':'block'},500);
});
$('#fort_link').click(function(){
$('#fort_content').animate({display:'block'},500);
});
I also tried with the callback function after animation is done and it does alert me but nothing really happens as far as setting the display of the div to block.
But, when I try using simple .css method as shown below, it works, as expected. I am using JQuery 1.10.2. I even tried linking to Google's Jquery UI on the CDN. I am not exactly a novice in these things... May be just missing something stupid? Please help!
$('#fort_link').click(function(){
$('#fort_content').css('display','block');
});
use fadeIn() or fadeOut instead:
$('#fort_link_show').click(function(){
$('#fort_content').fadeIn(500);
});
$('#fort_link_hide').click(function(){
$('#fort_content').fadeOut(500);
});
or fadeToogle() for shorthand.
$('#fort_link').click(function(){
$('#fort_content').fadetoggle(500);
//#fort_content will fadeIn if its hidden, fadeOut if its visible
});
From the jQuery docs:
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be
So basically, you can't 'animate' block.
I'm having difficulty calling the jquery truncate plug-in a second time after I expand my div on .toggle.
I am able to initially call it to truncate my description, but then when I expand my div, i'd like to essentially show more description text (but not all of it). Then when collapsing the div, i'd like to call it yet again to set it back to the default truncated text.
Here is the fiddle:
http://jsfiddle.net/4bA7X/
Thanks for any help.
Try this jquery plugin instead: http://jedfoster.com/Readmore.js/. It works!