Develop Reference

jQuery .animate function won't work

This is the HTML:
<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<p class="question">QUESTION1</p>
<p class="answer">ANSWER1</p>
<p class="question">QUESTION2</p>
<p class="answer">ANSWER2</p>
This is the JavaScript/jQuery:
$(document).ready(function() {
$('.question').on("click", function() {
if ($(this).next('.answer').css('display') === 'none') {
$(this).next('.answer').animate({ "display": "block" }, 1000 });
}
});
});
The problem in that on click the function does not work - the display of the .answer p does not change.
Any possible solutions?

there is no option like display in the animate() function because there are no steps between display: block and display: none. transitions can only be possible with numeric values.
take a look at the jquery docs http://api.jquery.com/animate/
use this:
$(document).ready(function() {
$('.question').on("click", function() {
var $answer = $(this).next('.answer');
if(!$answer.is(':visible')) {
$answer.fadeIn(1000);
}
});
});

How to use setTimeout to toggle a class in jquery?

This code uses a mouse click to toggle a class on an image.
I'd like this transition to happen automatically using setTimeout.
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});

$(document).ready(function() {
$("#cf_onclick").click(function() {
setTimeout(function() {
$("#cf2 img.top").toggleClass("transparent");
}, 1000);
});
});
.transparent {
opacity: 0.5;
filter: alpha(opacity=50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='cf2'>
<img class='top' src="https://loremflickr.com/640/360
" alt="Image not found!" height="100" width="100">
</div>
<button id='cf_onclick'>Click Me</button>
Note:- You can set image by using setTimeout function.

setTimeout(function () {
$('#cf2 img.top').toggleClass('transparent');
}, 0);

In the following example toggleClass will be called automatically in every second.
setTimeout(function() {
$("#cf2 img.top").toggleClass("transparent");
}, 1000 ); // put timeout here, e.g. 1000 milliseconds is 1 second

Infinite fadeOut / fadeIn substitution of two list items on click

I have this almost working but not quite. I just want to be able to keep switching between two unordered list items on a button click fading the first item out as the second fades in. Then do it the opposite way on another click. On the first click it works, as does the second, but I'm not sure where to go after that. The first li item is just a bg image that will change to some text on click, then back to the image on another click. Thanks in advance. T
$(document).ready(function() {
$('#myButton').click( function() {
$('.contentOne').fadeOut( 'slow', function() {
$('.contentTwo').fadeIn('slow', function() {
$('#myButton').click(function() {
$('.contentTwo').fadeOut( 'slow', function() {
$('.contentOne').fadeIn('slow');
});
});
});
});
return false;
});
});

Maybe this can help you:
html
<button id="changeToText">
Change
</button>
<div class="gizBrainButton">
first class
</div>
<div class="gizBrainButton">
first class
</div>
<div class="showGizText" style="display:none;">
Second class
</div>
<div class="showGizText" style="display:none;">
Second class
</div>
js
$('#changeToText').click(function() {
if ($('.gizBrainButton').is(':visible')) {
$('.gizBrainButton').fadeToggle(1000).promise().done(function() {
$('.showGizText').fadeToggle(1000);
});
} else if($('.showGizText').is(':visible')) {
$('.showGizText').fadeToggle(1000).promise().done(function() {
$('.gizBrainButton').fadeToggle(1000);
});
}
});

You could store the state of one of the content parts and toggle visibilty based on that. For example:
$(document).ready(function () {
/** #var boolean */
var isContentOneVisible = true;
/** #var string */
var fadeSpeed = 'slow';
$('#myButton').click(function () {
if (isContentOneVisible) {
$('.contentOne').fadeOut(fadeSpeed);
$('.contentTwo').fadeIn(fadeSpeed);
isContentOneVisible = false;
return;
}
$('.contentOne').fadeIn(fadeSpeed);
$('.contentTwo').fadeOut(fadeSpeed);
isContentOneVisible = true;
});
});
jQuery provides fadeToggle aswell. It would ease implementing your use case as it keeps track of state itself.
I would prefer a lightweight vanilla solution. For example, you could toggle a classname on an element wrapping the elements you want to show and hide. Use CSS to toggle their visibility, possibly using transitions to mimic the effect jQuery implemented.
Below some example code to get you going.
HTML:
<button class='contentToggler'>Show secondary content</button>
<ul class='toggleableContent'>
<li class='toggleableContent__item toggleableContent__item--first'><!-- content --></li>
<li class='toggleableContent__item toggleableContent__item--second'><!-- content --></li>
</ul>
CSS:
.toggleableContent__item {
opacity: 1;
transition: opacity .5s ease;
}
.toggleableContent--isToggled .toggleableContent__item--first,
.toggleableContent__item--second {
opacity: 0;
}
.toggleableContent--isToggled .toggleableContent__item--second {
opacity: 1;
}
Javascript:
document.addEventListener('DOMContentLoaded', function (event) {
var toggler = document.querySelector('.contentToggler');
var toggleableContent = document.querySelector('.toggleableContent');
if (!toggler || !toggleableContent) {
return;
}
toggler.addEventListener('click', function (event) {
toggleableContent.classList.toggle('toggleableContent--isToggled');
});
});

what is the best way to return the orginal style when mouseleave jquery?

I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?
var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
// what should I put here to return the original
});

Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.
var eye_disease1 = $('#eye_disease1'),
diseaseHtml = '';
eye_disease1.mouseenter(function () {
if (!diseaseHtml) {
diseaseHtml = eye_disease1.html();
}
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
diseaseHtml = '';
eye_disease1.html(diseaseHtml);
});

You can all use the addClass
`$("selector").mouseenter(function(){
$(this).addClass("active");
})
$("selector").mouseleave(function(){
$(this).removeClass("active");
})`

var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
function() {
eye_disease_1_html = eye_disease1.html();
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
.fadeOut(0)
.css('border','none')
.fadeIn(400);
}, function() {
eye_disease1.find('span.show_li, span.show_li_2')
.fadeOut(400)
.delay(400)
.html(eye_disease1_html)
.fadeIn(0);
}
);
But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.
HTML:
<div id="eye_disease1">
<div class="original-content">
Original Content
</div>
<div class="hovered-content">
<span class="show_li">symptoms</span>
<span class="show_li_2">diseases</span>
</div>
</div>
CSS:
.hovered-content {
display: none;
}
.hovered {
border: none;
}
JS:
$('#eye_disease1').hover(
function() {
$(this).addClass("hovered");
$(this).find(".original-content").fadeOut();
$(this).find(".hovered-content").fadeIn();
}, function() {
$(this).removeClass("hovered");
$(this).find(".hovered-content").fadeOut();
$(this).find(".original-content").fadeIn();
}
);
You can see it here: https://jsfiddle.net/waga7Lu1/3/
The transition effect is a bit clumsy but I'm not really sure what you're after.

Cancel setTimeout if mouse is over div

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)
This is the jquery code I wrote:
$(document).ready(function() {
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

First, put B inside of A:
<div class="a">
AAA
<div class="b">
BBB
</div>
</div>
Then, abandon your javascript and make life easier with plain old css:
.b
{
display: none;
}
.a:hover .b
{
display: block;
}
Edit - Here's a live example using the CSS technique: http://jsfiddle.net/gilly3/sBwTa/1/
Edit - If you must use the JavaScript, just add clearTimeout(time) to show(). But, let's also simplify your code:
$(function()
{
var time = 0;
function show()
{
clearTimeout(time);
$("BBB").show(); // Existing jQuery that does $().css("display","block")
}
function hide()
{
time = setTimeout(function()
{
$("BBB").hide();
}, 200);
}
$("AAA,BBB").mouseenter(show).mouseleave(hide);
});

There are a few small problems with your code. The one which is biting your right now is that you aren't clearing BBB's timeout when you enter AAA. You can fix this by adding a clearTimeout to AAA's mouseover handler.
Secondly, it's safest to clear this kind of timeout before you set it each time, so that you don't have your timeout tracking overwritten if something unexpected happens. (It's always safe to clear a timeout, even if it's invalid or has already occurred.)
Lastly, though this is most likely only a problem in your example code, you're leaking time into the global object. ;-)
Try this instead:
$(document).ready(function() {
var time;
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
clearTimeout(time);
show();
});
$(this).mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}

Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter on both divs.
$(document).ready(function() {
var timerId, delay = 300;
var a = $("#A"),
b = $("#B");
function stopHide() {
clearTimeout(timerId);
}
function showTip() {
b.show();
}
function startHide() {
timerId = setTimeout(function() {
b.hide();
}, delay);
}
a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
b.mouseenter(stopHide).mouseleave(startHide);
});
div {
border: 2px dashed firebrick;
float: left;
font-size: 50pt;
font-weight: bold;
padding: 5px;
margin: 5px;
}
#B {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>
Previously at http://jsfiddle.net/92jbK/1/

You code is wrong :)
Try this:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#AAA, #BBB {
width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="BBB">
BBB
</div>
<div id="AAA">
AAA
</div>
<script src="http://www.google.com/jsapi"></script>
<script>
//VISIBLE
function hide() {
$("#BBB").css({'display':'none'});
}
function show() {
$("#BBB").css({'display':'block'});
}
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// NOT VISIBLE
// function hide() {
// $("#BBB").css({'display':'none'});
// }
// function show() {
// $("#BBB").css({'display':'block'});
// }
$(document).ready(function() {
var time;
$("#AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("#BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("#BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
});
</script>
</body>
</html>

one alternative is to use jquery's tooltip http://flowplayer.org/tools/tooltip/index.html
then you can just do for example:
$('#A').live(function() {
$(this).tooltip({
relative: true,
position: 'top center',
delay: 200,
effect: !$.browser.msie ? 'fade' : 'toggle',
fadeInSpeed: 100,
fadeOutSpeed: 50,
predelay: 500
});
});
and you just make div b of class tooltip

Is time declared outside all of this?
It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout() call has no effect.
Declare it outside both with var time;, so that they refer to the same variable.