I'm trying to move two block at the same time within a container on hover and then off hover it will retain to its original state. When attempted this, it was unsuccessful. I was hoping for a little assistance doing this. here's an example of it:
var container = $('#blockcontainer');
var container2 = $('#blockcontainer .block1');
var container3 = $('#blockcontainer .block2');
container.hover(function(){
container3.animate({marginTop: '-100'}, 1000);
container2.animate({marginTop: '100'}, 1000);
});
http://jsfiddle.net/gy9py/
Would truly appreciate the assistance.
I positioned the elements absolutely within the parent container. The margin would always push the sibling element which is why it would disappear. Also changed hover to mouseenter and mouseleave.
You could also achieve the effect with CSS3 transitions.
http://jsfiddle.net/gy9py/3/
<script>
container.on({
'mouseenter': function(){
container3.stop().animate({top: '0'}, 1000);
container2.stop().animate({top: '100px'}, 1000);
},
'mouseleave': function(){
container3.stop().animate({top: '100px'}, 1000);
container2.stop().animate({top: '0'}, 1000);
}
});
</script>
Hopefully that's enough to get you started.
Related
how to scroll up step by step and scroll down step by step using jquery. (jquery ui not appreciated).
i have a 2 divs
<div class="upper" style="height:35px;background-color:red;right:0;left:0;top:0;position:fixed;width:100%;z-index:2000"></div>
<div class="lower" style="height:35px;background-color:red;right:0;left:0;bottom:0;position:fixed;width:100%;z-index:2000"></div>
if i drag an image and hover on first div (upper),it should scroll up step by stell.
if i drag and hover on 2nd div it should scroll down manually.
in both cases scrolling should stop if i came out of the div.
i am trying to implement it using events
var isleftDragPosition=true;;
$('.upper').on('dragleave', function(){
console.log("hidragleave");
var isleftDragPosition=true;
});
$('.lower').on('dragleave', function(){
console.log("hi2dragleave")
var isleftDragPosition=true;
});
$('.upper').on('dragenter', function(){
var isleftDragPosition=false;
while(!isleftDragPosition){
var x=document.documentElement.scrollTop;
console.log("to upper position",x);
window.scrollTo(0, x-2);
}
});
$('.lower').on('dragenter', function(){
console.log("hi2dragenter",document.documentElement.scrollTop)
window.scrollTo(1000, 1000);
});
i am trying it with the top div to scroll up, but the code crashes my tab(hang).
how i can do that?
You are redefining your flag in each handler, so the change is not saved. Also, while loop might be to fast for your particular case. I modified code like this:
$('.upper').on('dragenter', function(){
isleftDragPosition=false;
clearInterval(interval);
var f = function() {
if(!isleftDragPosition){
var x=document.documentElement.scrollTop;
console.log("to upper position",x);
window.scrollTo(0, x-2);
} else {
clearInterval(interval);
}
}
setInterval(f, 1000);
});
Hope this helps.
I have animation on one element but its movement affects siblings as well. How can I have animation only on item without affecting siblings element?
Example of problem:
function animateSearch() {
$('.glyphicon-search').animate({'margin-top':'-10px'}, 1000);
$('.glyphicon-search').animate({'margin-top':'0px'}, 1000);
}
var interval = setInterval(animateSearch,1000);
$('.arrowDown').mouseover(function() {
clearInterval(interval);
});
DEMO: jsfiddle
Simply put Css postion:absolue rule like bellow :
.glyphicon-search {
position:absolute;
}
Fiddle Here
I made div, if i click on it, jquery makes bullet and that element is animated. This is code:
$('.square').click(function() {
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
});
It works properly when I'm not clicking second time on div before animation is done. If i do this, my second "bullet" starts animation from position of first.
How to fix that? Thank's for help :)
UPDATE##
Here's the jsfiddle with problem:
https://jsfiddle.net/2ghj1x45/
it's because the elements all have a size because they aren't positioned absolutely so each bullet div you add has display block, so will get it's own line where it's height is bullet size + margin top , which increases as it's animated. try instead using position absolute so the bullet div doesn't affect the layout of any other div
like so
$(bullet).animate({ top: value });
Why not timeout the click function with a variable:
var animating = false;
$('.square').click(function() {
if(!animating) {
animating = true;
setTimeout(function() {
animating = false;
}, 2000);
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
}
});
EDIT:
Updated JSfiddle
Here is my fiddle
I have an animation, that have to rearrange items in the list, the one we clicked on slides on the left and becomes active, the active element slides on the right and active class is remove from it.
However, i have some problems with the insertBefore function. Even if animation went right, it messes everything up. I am trying to figure out how to make everything look in place
Here is my script, but you can use fiddle
$(document).ready(function(){
console.log("it started");
swapsies();
});
function swapsies()
{
$('.lang').on('click', function() {
// console.log("here");
//.when(
var $dist = 27;
var $diststr="+="+$dist;
var $diststr2="-="+$dist*2
var $clicked=$(this);
var $mcb= $clicked.css('margin-left');
var $mnb=$clicked.css('margin-left');
var $mab=$('.active').css('margin-left');
$.when(
$(this).animate({ "margin-left": $diststr2 }, 500),
$(this).next().animate({ "margin-left": $diststr }, 500),
$('.active').animate({ "margin-left": $diststr }, 500)
).done(function(){
$clicked.insertBefore('.active');
$(this).css('margin-left', "-54")
$(this).next().css('margin-left', "27");
$('.active').css('margin-left', "27");
$('.active').removeClass('active');
$clicked.addClass('active');
});
});
}
Im not sure how exactly its supposed to re-arrange the items. but one way is this.
http://jsfiddle.net/7o6uuf0f/
minor change to the code in your done function
$clicked.insertBefore('.active');
$("#swapthis li").css("margin-left", "0");
$('.active').removeClass('active');
$clicked.addClass('active');
However you could also consider not reinventing the wheel, and use this.
http://jqueryui.com/sortable/#display-grid
I have a stack of images I'm bringing in from YouTube, and I want the top image to fade out on hover and then start a rotating slideshow of the next 3 images. I've almost got it working but I'm having an issue with getting the SetInterval to stop when I hover off of the thumbnail.
thumbRotate: function(){} //This is up in the main object
//hover state over thumbs and slideshow animation
$('#youtube-widget ul a').hover(
// hover-in
function(){
$this = $(this);
$(this).children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '0'}, 200, function() {
$.Modules.VideoWidget.thumbRotate = setInterval(function() {
var topImage = $this.children('img:first');
topImage.stop(true, true).fadeOut(500).next().stop(true, true).fadeIn(500).end().appendTo($this);
}, 2000);
});
//hover-out
}, function() {
clearInterval($.Modules.VideoWidget.thumbRotate);
$(this).children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '1'}, 200);
}
);
edit: I noticed that hovering over the thumbnail seems to be increasing animation exponentially. For some reason the animations seem to be stacking up on themselves, but I don't really understand why.
Here is the problem - .hover() and .mouseover()...
Both of these functions perform an action not only when the cursor enters the element but also every time the mouse moves a single pixel within the element. In other words those 2 functions are great for simpler interactions, but it is necessary to use .mouseenter() and mouseleave() to setup interval functions otherwise you end up setting a new interval every time the cursor moves within the element (which can be a lot).
new fiddle - http://jsfiddle.net/b3Mb8/2/
new code -
//thumb rotate animation on hover
function startRotate($this) {
$.Modules.VideoWidget.thumbRotate = setInterval ( function() {
topImage = $this.children('img').filter(":first");
topImage.animate({opacity: '0'}, 500).next().animate({opacity: '1'}, 500).end().appendTo($this);
}, 800);
}
function stopRotate() {
clearInterval($.Modules.VideoWidget.thumbRotate);
}
$("#youtube-widget ul a").mouseenter(function() {
$this = $(this);
startRotate($this);
}).mouseleave(function() {
stopRotate();
});
//hover state over thumbs and slideshow animation
$('#youtube-widget ul a').hover( function(){
$this.children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '0'}, 300, function() {
});
//hover-out
}, function() {
$this.children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '1'}, 300);
});
It's an issue with your variable name I think. It's working here:
I just added this and used it in both intervals
var hoverInterval;
http://jsfiddle.net/b3Mb8/