Infinite fadeOut / fadeIn substitution of two list items on click - javascript

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');
});
});

Related

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L
Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

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.

On hover and on click function / Jquery

I posted a question few hours back but my example was not perfect to understand.
So here it goes.
I have two big boxes. On hover each of the big red box, the small black box should change it's bg color.When you click on each big box then the small box color should change as well.On mouse enter and out it's working fine. But onclick it's not working. I tried with bind/unbind but didn't work.
Jquery:
$('.libg').click(function () {
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
Jsfiddle is http://jsfiddle.net/squidraj/kdZ8J/2/
Please advice. Thanks.
You have two conflicting lines of code:
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
The first line will remove the class, and the second will add the class right back to the element.
http://jsfiddle.net/kdZ8J/4/
$('.libg').click(function () {
var current = $(this).find('.imagebg');
var all = $('.imagebg');
var index = all.index(current);
$('.imagebg').each(function(i) {
if(i != index) {
$(all[i]).removeClass('active');
}
});
if(current.hasClass('active')) {
current.removeClass('active');
} else {
current.addClass('active');
}
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
I would check each box separately. So I'm going to modify your html code a bit along with some jquery code. http://jsfiddle.net/kdZ8J/15/
Html code:
<ul>
<li class="libg1" id="1">
<div class="imagebg1" id="1a"></div>
</li>
<li class="libg2" id="2">
<div class="imagebg2" id="2a"></div>
</li>
</ul>
Handle click events:
$('#1').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#1a').addClass('active');
//remove the click and active class
$('#2').data('clicked', false);
$('#2a').removeClass('active');
})
$('#2').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#2a').addClass('active');
//remove the click and active class
$('#1').data('clicked', false);
$('#1a').removeClass('active');
})
First Rectugular Hovering code:
$('.libg1').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#1a').removeClass('active');
}
else{
$('#1a').addClass('active');
}
}
else{
$('#1a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#1a').addClass('active');
}
else{
$('#1a').removeClass('active');
}
});
Second Rectangular Hoving code:
$('.libg2').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#2a').removeClass('active');
}
else{
$('#2a').addClass('active');
}
}
else{
$('#2a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#2a').addClass('active');
}
else{
$('#2a').removeClass('active');
}
});

Div slides in with animation, but never slides back

I am trying to make a div slide into the left of the screen using .animate(). It works initially, but then it doesn't slide back. Only in. Any suggestions as to why it's not working or better solutions would be awesome :)
EDIT: Right now the function below is being called onclick.
$(function() {
toggleMobileMenu = function() {
var menu = $('#mobile-side-menu');
if( menu.css('left', -250) ) {
menu.animate({left: 0}, 400, function(){
positionValue = 0;
});
} else {
menu.animate({'left': '-250'},400);
}
}
});
You are using .css() method as a setter which returns a jQuery object and an object is a truthy value in JavaScript, so your code doesn't reach to the else part. It should be:
if ( menu.css('left') === '-250px' ) {
// ...
}
Below is another way to do the animation if I correctly understand what you want.
See this fiddle: http://jsfiddle.net/ZEH5b/
Mainly this bit...
$(function() {
var block = $("#block");
var slid = false;
block.click(toggleMobileMenu);
function toggleMobileMenu() {
if (slid) {
block.animate({left: "+=250"}, 400, function () { slid = false; });
}
else {
block.animate({left: "-=250"}, 400, function() { slid = true; });
}
}
});
I think the animation, triggered by a button can be made to apply to a menu relatively easily.
CSS
#mobile-side-menu{position:relative;left:-250;display:block;}
HTML
<ul id="mobile-side-menu">
<li>Home</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
<button id="mobile-menu-move">Show Menu</button>
<button id="mobile-menu-back">Remove Menu</button>
jQuery
$(function () {
var $menu = $('#mobile-side-menu');
var $slideButton = $('#mobile-menu-move');
var $backButton = $('#mobile-menu-back');
$slideButton.on('click', function () {
$menu.animate({
left: "0"
}, 400, function () {});
});
$backButton.on('click', function () {
$menu.animate({
left: "-250"
}, 400, function () {});
});
});
jsFiddle
isnt this easyer done with just css and a onclick event changing the id tag of the div:
#itemclicked{
transition:0.5s; /*also do transitions specific for webkit, moz etc...search google for css transitions*/
margin-left:-250px;
/*and the rest of the css*/
}
and the onclick
onclick="javascript:document.getElementById('item').value='itemclicked'"

mouseenter + mouseleave / hover on two different div

Hi ive got this piece of code to deal with mouseenter and leave on 2 superposed div
When a user mouseenter the main div the sub div is showed, and if the user get in the subdiv the subdiv must remain, but if the user get out the maindiv and is not in the subdiv the subdiv must be hidden, try with my jsfiddle http://jsfiddle.net/rgkcp/
but the timer is not run in my piece of code
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
$(this, subDiv).mouseleave(function () {
// this is not run
timer = setTimeout(function () {
$(this).find(".mupHome").css("visibility", "hidden");
$(this).find(".mupHome").animate({
marginTop: '+23px'
})
}, 50);
});
$(this, subDiv).mouseenter(function () {
clearTimeout(timer);
});
});
And the html :
<div class="bulleHome ombreV">
<a href="http://preprod.mupiz.com/georges-barret" style="font-size:0.7em;text-decoration:none;" pid="13200">
<img src="http://www.mupiz.com/images/img-membres/images_4958C.jpg" alt="Georges profil" height="100px"><br>
</a>
<div class="mupHome" style="visibility: visible; margin-top: -23px;">
<img src="http://www.mupiz.com/images/mupitR.png" alt="Mup It!" id="bouton-ajout-ami13200" onclick="alert('ok')" style="cursor: pointer;"><span class="tMupHome">Mup it!</span>
</div>
</div>
And the linked css :
.mupHome{position:absolute;color:#fff;background: rgb(0, 0, 0) transparent;background: rgba(0, 0, 0, 0.8);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";width:100px;visibility:hidden;height:19px;}
.tMupHome{position:relative;top:-8px;left:5px}
Any ideas ?
Js Fiddle : http://jsfiddle.net/rgkcp/
Thanks!
I suggest you to create a var X and set it to false. Then if your mouse go over the SubDiv , you set it to true :
$(".mupHome").mouseenter(function () {
ondiv = true;
});
After this, you just have to verify if the var X is set to true when you leave the first div, if yes, you do nothing. if it still set to false, you hide the SubDiv :
$(this, subDiv).mouseleave(function () {
if(ondiv === false)
{
$(".mupHome").animate({
marginTop: '23px'
},function() {
$(".mupHome").css("visibility", "hidden");
});
}
});
Here's the jsFiddle.
I am guessing that you want the div to move back out of the way and disappear when the mouse leaves the sub div. If that is the case this should work fine. If it is not we could definitely use some clarification. You were changing the visibility before the animation, so the animation would not be visible. There were a couple missing quotes in the fiddle as well.
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
});
// Added Code
$('div.mupHome').on({
mouseleave: function() {
$(this).animate({marginTop: '+0px'}, 1000, function(){$(this).css('visibility', 'hidden');});}
});
Also on the mupHome div the style was not closed out correctly, not sure if this is true in your real code or not
<div class="mupHome" style="visibility: visible;>
Should be
<div class="mupHome" style="visibility: visible;">

Categories

Resources