Move/duplicate an element to another place on click with jQuery - javascript

I have a row of five boxes. When you click on any except the first one, the clicked box fades out, the ones before it slide to the right, and a new box appears on the far left as the new first element.
1) Instead of prepending the body with the div with classes "primaryfade," "primary," and "box", I'd rather prepend with the element I just clicked without the class "fade-out" but with new classes "primary" and "primary-fade" (while still retaining the class "box").
2) In my fiddle I realize that any box that previously had the class "primary" and then moved to a non-first position no longer triggers the animation if clicked on again. I don't know why that is, but I'd like any element to move back to the first position on click regardless.
I'm sure my jQuery can be written more elegantly. I'm not very experienced with it. This is for proof of concept.
http://jsfiddle.net/q6rtgh79/3/
HTML -
<div class="primary box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
CSS -
body {border:1px solid;}
.box {color:white;font-weight:bold;transition: opacity 1s, background 1s;display:inline-block;width: 40px;height:40px;background: gray;margin-left: 20px;}
.box:first-child {margin:0;}
.box4 {background: pink;}
.allmove .box {transition: transform .5s ease-in-out;transform: translate3d(150%,0,0);}
.allmove .fade-out ~ .box, .primary, .primary ~ .box {
transform: translate(0,0)!important;}
.primary {background:green;}
.fade-out, .primaryfade {opacity: 0;}
jQuery -
$(function() {
$(".box:not(:first-child)").click(function() {
$(this).addClass("fade-out");
$(".primary").removeClass("primary");
setTimeout(function() {
$("body").addClass("allmove");
}, 1000);
setTimeout(function() {
$("body").prepend("<div class=\"primaryfade primary box\">new</div>");
}, 1500);
setTimeout(function() {
$("div[class*='fade-out']").remove();
}, 1500);
setTimeout(function() {
$("body").removeClass("allmove");
}, 1500);
setTimeout(function() {
$("[class*='primaryfade']").removeClass("primaryfade")
}, 2000);
});
});

I Agree with Rohan, but to solve you first point of ", I'd rather prepend with the element I just clicked" instead of
setTimeout(function () {
$("body").prepend("<div class=\"primaryfade primary box\">new</div>");
$("div[class*='fade-out']").remove();
$("body").removeClass("allmove");
}, 1500);
use
var item = $(this);
setTimeout(function (item) {
$("body").prepend(item.removeClass('fade-out').addClass('primaryfade').addClass('primary').addClass('box').html('new'));
$("div[class*='fade-out']").remove();
$("body").removeClass("allmove");
}, 1500, item);
This will:
prepend the current item you clicked on
remove the fade-out class
add the primary and primaryfade and box classes
update the text to 'new'

I think you should use on() for dynamically added boxes like,
$(document).on('click',".box:not(:first-child)",function() {
....
....
});
It will solve your second point as well as first issue. See updated fiddle
You can merge the animation for 1500 seconds like,
$(function () {
$(document).on('click', ".box:not(:first-child)", function () {
$(this).addClass("fade-out");
$(".primary").removeClass("primary");
setTimeout(function () {
$("body").addClass("allmove");
}, 1000);
// merge the functions which are called after 1500ms
setTimeout(function () {
$("body").prepend("<div class=\"primaryfade primary box\">new</div>");
$("div[class*='fade-out']").remove();
$("body").removeClass("allmove");
}, 1500);
setTimeout(function () {
$("[class*='primaryfade']").removeClass("primaryfade")
}, 2000);
});
});
Updated Fiddle

use something like this :-
$(function() {
function clickEvent(){
$(".box:not(:first-child)").off("click");
$(".box:not(:first-child)").on("click",function() {
console.log('here')
$(this).addClass("fade-out");
$(".primary").removeClass("primary");
setTimeout(function() {
$("body").addClass("allmove");
}, 1000);
setTimeout(function() {
$("body").prepend("<div class=\"primaryfade primary box\">new</div>");
clickEvent();
}, 1500);
setTimeout(function() {
$("div[class*='fade-out']").remove();
}, 1500);
setTimeout(function() {
$("body").removeClass("allmove");
}, 1500);
setTimeout(function() {
$("[class*='primaryfade']").removeClass("primaryfade")
}, 2000);
});
}
clickEvent()
});
here is the link http://jsfiddle.net/q6rtgh79/5/

Related

Show popup on hover only if i hover on li after 1 second

I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.
<script type="text/javascript">
$(document).ready(function(){
var _changeInterval = null;
$( ".badge_icon" ).hover(function() {
clearInterval(_changeInterval)
_changeInterval = setInterval(function() {
$(this).find(".badges_hover_state").fadeIn(500);
}, 1000);
},function() {
$(this).find('.badges_hover_state').fadeOut(500);
});
});
</script>
I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.
you could use this jquery script:
var myTimeout;
$('#div').mouseenter(function() {
myTimeout = setTimeout(function() {
//Do stuff
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
});
See the DEMO
Was able to solve this issue by adding window in front of variable name.
var myTimeout;
$('.div').mouseenter(function() {
window.el = $(this);
myTimeout = setTimeout(function() {
el.css("width","200px");
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
el.css("width","100px");
});

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

hide a textbox if mouseleave beyond a certain time in jQuery

I have to hide a textbox only if the user hovers out > 2 seconds.
<div id="content">
<input type="text" id="txt1" />
</div>
$('#content').on('mouseleave', function(){
$('#txt1').delay(2000).hide();
});
This will wait for 2 seconds before hiding the textbox. But if the user comes back within 2 seconds it will still hide. How to prevent that from happening?
Use setTimeout/clearTimeout instead:
var clr;
$('#content').on('mouseleave', function () {
clr = setTimeout(function () {
$('#txt1').hide();
}, 2000)
}).on('mouseenter', function () {
clearTimeout(clr)
})
Also note that the delay in your example won't work at all since the .delay() method delays the execution of functions that follow it in the standard effects queue or with a custom queue. It won't delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
jsFiddle example
Use the good ol' fashion setTimeout and clearTimeout
var leaveTimeout;
$('#content').on('mouseleave', function() {
leaveTimeout = setTimeout(function() {
$('#txt1').hide();
}, 2000);
})
.on('mouseenter', function() {
clearTimeout(leaveTimeout);
});
How about a simpler CSS solution: http://jsfiddle.net/2Jtrb/2/.
HTML:
<div id="content">
<input type="text" id="txt1" />
</div>
CSS:
div {
outline: 1px dotted #000;
}
div > input {
visibility: hidden;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
EDIT: the input will also stay visible if it is focused.
div:hover > input, input:focus {
visibility: visible;
transition-duration: 0s;
}
Try this...
var theTimer;
$('#content').on('mouseleave', function(){
theTimer = setTimeout(function() {
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(theTimer);
});
DEMO
If you use setTimeout you can cancel the timeout if the user enters the text area again. That code looks something like:
var timeoutHandle;
$('#content').on('mouseleave', function(){
timeoutHandle = setTimout(
function () {
timeoutHandle = undefined;
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
if (timeoutHandle) clearTimeout(timeoutHandle);
});
By the way, this is similar to what other plugins provide so you might consider looking at the hover intent plugin here: http://cherne.net/brian/resources/jquery.hoverIntent.html.
You can try this:-
var typingTimer;
$('#content').on('mouseleave', function(){
typingTimer = setTimeout(function(){
$('#txt1').hide();
},2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(typingTimer);
});
Use setTimeout function.
var timeout = null;
$('#content').on('mouseleave', function() {
timeout = setTimeout(function() { $('#text1').hide();
});
Then when the user enters the div, clear the timeout.
$('#content').on('mouseenter', function() {
clearTimeout(timeout);
});
I wrote this without looking anything up, so I hope I didn't messed up ;)

jquery fadeIn (on)click each element in succession

I am trying to fade each element in a div to fadeIn (in) succession. I know how to fade in the whole block but not each individual div.
http://jsfiddle.net/reggi/Km55n/
$('#button').click(function() {
setTimeout(function() {
$('#divWithDivs').fadeIn(500);
}, 300);
});
You need to fade the next div in the completion callback of the previous one.
For example:
function fadeAll(elems) {
elems.filter(':hidden:first').fadeIn(1000, function() { fadeAll(elems); });
}
fadeAll($('#parent div'));
Demo
Note that you'll need to hide the children, not the parent.
You could do something like this:
$('#button').click(function() {
var show_next = function(elem) {
if (elem.length) {
elem.fadeIn(300, function () {
show_next(elem.next());
});
}
};
show_next($('div#divWithDivs').children().first());
});
$('#divWithDivs').children().first().fadeIn(500, function() {
$(this).next().fadeIn(500, arguments.callee);
});
Here the demo based on your: http://jsfiddle.net/Km55n/2/

Jquery Hover is delayed

http://wesbos.com/tf/shutterflow/?cat=3
when one hovers over an image .cover is faded in. I use jquery to change the opacity because CSS doesn't work in IE for this purpose.
My code is:
$(document).ready(function () {
$('.slide').hover(function () {
$(".cover").animate({
opacity: 0.7
}, 300).fadeIn('300');
}, function () {
$(".cover").animate({
opacity: 0
}, 300).fadeOut('300');
});
});
I want the fade in to be instant, not wait 1 second. Any ideas?
You have two different animations happening sequentially: first, .animate({ opacity: 0.7 }, 300) and second .fadeIn(300). Since those are competing effects, it's probably not helping anything to have them both running.
If .fadeIn() will do what you want, try just using that:
$(document).ready(function() {
$('.slide').hover(
function() { $(".cover").fadeIn('300'); },
function() { $(".cover").fadeOut('300'); }
);
});

Categories

Resources