Develop Reference

Fade text when using jquery .hover

I am using jquery to swap text on hover, as follows:
$("#bottomMiddle").hover(function(){
$("#rightHeading").text("CMS heading");
$("#rightContent").text("CMS content");
},function(){
$("#rightHeading").text("This is the original heading");
$("#rightContent").text("This is the original content");
});
This works but the effect is harsh and would like to fade the text in and out, I have tried using .fadeIn(); but had no success. Is there any way to use this hover swap and get it to fade at the same time?

You can achieve the desired effect by using callbacks.
This executes the .text() call when the .fadeOut() is complete, just before the .fadeIn():
$("#bottomMiddle").hover(function(){
$("#rightHeading").fadeOut(function() {
$(this).text("Hello").fadeIn();
});
$("#rightContent").fadeOut(function() {
$(this).text("World").fadeIn();
});
},function(){
$("#rightHeading").fadeOut(function() {
$(this).text("This is the original content").fadeIn();
});
$("#rightContent").fadeOut(function() {
$(this).text("This is the original content").fadeIn();
});
});
button {
width: 300px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="bottomMiddle">Button</button>
<div id="rightHeading">This is the original heading</div>
<div id="rightContent">This is the original content</div>

You can do it easily with jQuery animations. Check this jsfiddle.
Your code could looks like this:
$("#bottomMiddle").hover(function(){
$("#rightHeading").hide().text("CMS heading").fadeIn(200);
$("#rightContent").hide().text("CMS content").fadeIn(200);
},function(){
$("#rightHeading").hide().text("This is the original heading").fadeIn(200);
$("#rightContent").hide().text("This is the original content").fadeIn(200);
});

Another solution, but really similar to Joel Almeida. I tried to better structure the code, so it is more obvious what is going on.
var heading = $("#rightHeading")
var content = $("#rightContent")
var both = heading.add(content)
var animDuration = 300 // ms
var transition = function(headingText, contentText) {
both.fadeOut(animDuration, function() {
heading.text(headingText)
content.text(contentText)
both.fadeIn(animDuration)
})
}
$("#bottomMiddle").hover(
function() {
transition('CMS heading', 'CMS content')
},
function() {
transition('This is the original heading', 'This is the original content')
}
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bottomMiddle">HOVER</div><br />
<div id="rightHeading">This is the original heading</div>
<div id="rightContent">This is the original content</div>

How to write while members of class still exist in page condition

In jquery or js, preferably jQuery or js that is well supported, how can I do a while with the condition that there are still members of the class on the page.
What I am doing in the suite of the while is systematically removing the elements in the class, but I can not remove them all at once.
Let's say the class is .card.
Here is my code:
$('#dismissAllButton').click(function(){
while($('.dataCard').length>0){
$('.right').eq(0).remove();
$('#left').children('.dataCard').first().addClass('animated').addClass('right');
setTimeout(function(){
$('.right').eq(0).remove();
$('#right').children('.dataCard').first().addClass('animated').addClass('right');
}, 150);
}
});
HTML:
<div id="left">
<div class="dataCard"></div>
<div class="dataCard"></div>
</div>
<div id="right">
<div class="dataCard"></div>
<div class="dataCard"></div>
</div>

You don't need a while loop. Instead, first iterate over each list, then within each list, iterate over each card. This allows you to set a delay on removing the card based on which list it is in so that you can get the effect of removing 1 by 1 from each list at the same time.
$("#dismissAllButton").on("click", function() {
$("#left, #right").each(function(i){
$(".dataCard",this).each(function(ii) {
var card = $(this);
setTimeout(function() {
card.addClass("right");
setTimeout(function() {
card.remove();
},500);
}, i*250+ii*500); // adjust `250` and `500` as needed.
});
});
});
Demo
250 is the delay between left and right, and 500 is the animation duration (dont forget to also update the css transition to reflect that)

while length isn't 0 remove.
while ($(".card").length) {
$(".card").eq(0).remove();
}

hide one div when another is showing in jQuery?

I am trying to hide a div when another one is visible.
I have div 1 and div 2.
If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.
The function would need to be function/document ready upon page load.
I've tried this but I'm not having any luck, can someone please show me how I can do this.
<script>
window.onLoad(function () {
if ($('.div2').is(":visible")) {
$(".div1").fadeOut(fast);
} else if ($('.div2').is(":hidden")) {
$('.div1').fadeIn(fast);
}
});
</script>

Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {}. Also, put fast in quotations. I don't know if that's required, but that's how jQuery says to do it.
<div class="div1"></div>
<div class="div2 hidden"></div>
.hidden { display: none }
$(document).ready(function() {
if($(".div1").hasClass("hidden")) {
$(".div2").fadeIn("fast");
}
else if($(".div2").hasClass("hidden")) {
$(".div1").fadeIn("fast");
}
});

You should pass a string to the .fadeIn() and .fadeOut() methods.
Instead of .fadeIn(fast) it'll be .fadeIn("fast"). Same for .fadeOut().
And in general since you're already using jQuery it's better to wrap your code like this:
$(function () {
// Code goes here
});

It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>)
With jQuery loaded you can do it like this
$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}
else if ($('.div2').is(":visible")) {
$('div1').hide();
}
});
WORKING EXAMPLE: http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.

You can use setTimeout or setInterval to track if these divs exists
$(function() {
var interval = window.setInterval(function() {
if($('#div2').hasClass('showing')) {
$('#div1').fadeOut('fast');
}
if($('#div2').hasClass('hidden')) {
$('#div1').fadeIn('fast');
}
}, 100);
// when some time u don't want to track it
// window.clearInterval(interval)
})
for better performance
var div1 = $('#div1')
, div2 = $('#div2')
var interval ....
// same as pre code

How to detect mouseleave() on two elements at once?

Answer can be in vanilla js or jQuery. I want to hide a div with the id "myDiv" if the user is no longer hovering over a link with the id "myLink" or a span with the id "mySpan". If the user has his mouse over either element "myDiv" will still show, but the second the user is not hover over either of the two (doesn't matter which element the user's mouse leaves first) "myDiv" will disappear from the face of existence.
In other words this is how I detect mouse leave on one element:
$('#someElement').mouseleave(function() {
// do something
});
but how to say (in a way that will actually work):
$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {
// do something
});
How to detect this?

Something like this should work:
var count = 0;
$('#myLink, #mySpan').mouseenter(function(){
count++;
$('#myDiv').show();
}).mouseleave(function(){
count--;
if (!count) {
$('#myDiv').hide();
}
});
jsfiddle

You could use a multiple selector:
$("#someElement, #someOtherElement").mouseleave(function() {
// Do something.
});

You can beautifully use setTimeout() to give the mouseleave() function some "tolerance", that means if you leave the divs but re-enter one of them within a given period of time, it does not trigger the hide() function.
Here is the code (added to lonesomeday's answer):
var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
count++;
$('#d3').show();
}).mouseleave(function(){
count--;
setTimeout(function () {
if (!count) {
$('#d3').hide();
}
}, tolerance);
});
http://jsfiddle.net/pFTfm/195/

I think, it's your solution!!!
$(document).ready(function() {
var someOtherElement = "";
$("#someElement").hover(function(){
var someOtherElement = $(this).attr("href");
$(someOtherElement).show();
});
$("#someElement").mouseleave(function(){
var someOtherElement= $(this).attr("href");
$(someOtherElement).mouseenter(function(){
$(someOtherElement).show();
});
$(someOtherElement).mouseleave(function(){
$(someOtherElement).hide();
});
});
});
----
html
----
<div id="someElement">
<ul>
<li>element1</li>
<li>element2</li>
</ul>
</div>
<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>

While the answer from lonesomeday is perfectly valid I changed my html to have both elements in one container. I originally wanted to avoid this hence I had to do more refactoring for my clients in other html templates, but I think it will pay out on the long term.
<div id="my-container">
<div class="elem1">Foo</div>
<div class="elem2">Bar</div>
</div>
$('#my-container').mouseleave(function() { console.log("left"); });

make div text disappear after 5 seconds using jquery?

i need to make a div text disappear after x seconds of displaying it using an ajax call
can you help me on this please ?
thanks

You can use empty() to remove a <div> contents:
setTimeout(fade_out, 5000);
function fade_out() {
$("#mydiv").fadeOut().empty();
}
assuming:
<div id="mydiv">
...
</div>
You can do this with an anonymous function if you prefer:
setTimeout(function() {
$("#mydiv").fadeOut().empty();
}, 5000);
or even:
var fade_out = function() {
$("#mydiv").fadeOut().empty();
}
setTimeout(fade_out, 5000);
The latter is sometimes preferred because it pollutes the global namespace less.

You can try the .delay()
$(".formSentMsg").delay(3200).fadeOut(300);
call the div set the delay time in milliseconds and set the property you want to change, in this case I used .fadeOut() so it could be animated, but you can use .hide() as well.
http://api.jquery.com/delay/

$.doTimeout( 5000, function(){
// hide the div
});

You would need to set something like setTimeout('$("#id").fadeOut("slow")', 5000) but other than that it depends on what the rest of your code looks like

This should work:
$(document).ready(function() {
$.doTimeout(5000, function() {
$('#mydiv').fadeOut();
});
});

You may need to display div text again after it has disappeared.
This can be done in 1 line.
$('#div_id').empty().show().html(message).delay(3000).fadeOut(300);

This Answer is without jQuery, you can just grab your element and know its index position.
Then use it in the div below. I will be your div's index number in dom.
const div = document.querySelectorAll('div');
setTimeout(() => {
div[i].textContent = '';
}, 3000);