animate div on mouse hover and leave - javascript

I trying to animate listfrom left to right and vice versa,now i want when mouse hover on div list animate left to right and when mouse leave that div than it list animate right to left , can anyone help me for this.
$('.ul_div').mouseover(function () {
$('.ul_div').css({ display: 'block' });
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
});
<div class="ul_div">Hover Me<div>
<ul id='ulEle'>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
Demo Here

jsFiddle Demo
CSS:
.ul_div ul {
position: absolute;
display: none
}
.ul_div {
border:2px solid Red;
position: relative;
}
Javascript:
$('.ul_div').hover(
function () {
$('.ul_div ul').css({
display: 'block'
});
$('.ul_div ul').animate({
left: '100px',
background: '#ccc'
}, 100);
},
function () {
$('.ul_div ul').animate({
left: '0',
background: '#ccc'
}, 100, function () {
$('.ul_div ul').css({
display: 'none'
});
});
});

You need to specify positioning on the ul element in order to use the CSS left and right properties.
Update your CSS as follows:
#ulEle {
position: absolute;
}
.ul_div {
border:2px solid Red;
position: relative;
}
You should then update your jQuery code to use the hover() function, and use the following code:
$('.ul_div').hover(function () {
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
}, function() {
$('.ul_div ul').animate({ left: '0px', background: '#ccc' }, 100);
});
Please see the updated jsFiddle for a demo.

Related

Why does the animation keep repeating itself even when not hovering over the div?

I am using Javascript & jQuery and I have been trying to make a quick website to show to my music teacher.
When I mouse over an invisible object the animation occasionally starts twice, or repeats forever, then it shows the screen I want it to show.
When I mouse off of it, it just does the normal animation back to 0px, but then for no apparent reason it does the starting animation again, then the off animation, then the start, and so on and so forth.
Here is a snippet of my code. Tell me if you need more.
$(document).ready(function() {
$("#song1").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
})
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
})
}, function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
})
})
body {
background-color: grey
}
p {
color: white
}
#song1 {
background-color: white;
opacity: 0;
width: 560px;
height: 315px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p id="song1tx">1.</p>
<div id="song1">
<p id="song1load" style="color: black">Loading...</p>
</div>
Try selecting the element only if it's animating:
$(document).ready(function() {
$("#song1:not(:animated)").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
});
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
});
});
$("#song1").mouseout(function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
});
});

jQuery Auto Scrolling Pause on MouseHover

I need a help with this auto-scrolling. Please help me to pause the scrolling when Hovering the Mouse over it. Thank you.
/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({
'overflow': 'hidden',
height: 'auto'
});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({
'overflow': 'hidden'
});
/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();
var scroll = function(resetY) {
//animate 기본 동작 변형 "swing" -> "linear"
$('.scroll-group').animate({
top: targetY * -1 + 'px'
}, 6000, "linear", function() {
$('.scroll-group').css({
top: 0
});
scroll();
});
}
scroll();
.scroll-wrap,
.scroll {
width: 100px;
height: 102px;
overflow-y: scroll;
margin: 0;
position: relative
}
.scroll-group {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>
Please use this fiddle.
I have added hover and mouseleave function to pause and resume the scrolling respectively.
/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({'overflow':'hidden',height:'auto'});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({'overflow':'hidden'});
/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();
var scroll = function(resetY){
//animate 기본 동작 변형 "swing" -> "linear"
$('.scroll-group').animate({top:targetY*-1+'px'},6000,"linear", function(){
$('.scroll-group').css({top:0});
scroll();
});
$('.scroll-group').hover(function() { //mouseenter
$('.scroll-group').stop(true, false);
});
$(".scroll-group").mouseleave(function(){
scroll();
});
}
scroll();
.scroll-wrap,.scroll {width:100px; height:102px;overflow-y:scroll; margin:0 ; position:relative }
.scroll-group {position:absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>

Control what mouseenter does depending on element color

I have made a nav bar that is originally white, but when the user scrolls down, it becomes transparent. When the nav bar is white at the top of the page, if the user hovers, it becomes transparent, and when his cursor leaves it returns to white. Now, logically, the same should happen when scrolled down, and it does. I don't want that to happen, instead I want the nav bar to stay transparent. So I've written the following code, but it is not working.
var color = $('.nav a').css("color")
if (color == rgb (0,0,249) ) {
$(".nav a").mouseenter(function(){
$(".nav a").stop( true ).animate({
backgroundColor: 'transparent',
});
$(".nav").stop( true ).animate({
backgroundColor: 'transparent',
});
});
$(".nav a").mouseleave(function () {
$(".nav a").stop( true ).delay(300).animate({
backgroundColor: 'white',
});
$(".nav").stop( true ).animate({
backgroundColor: 'white',
});
});
} else {
$(".nav a").mouseenter(function(){
$(".nav a").stop( true ).animate({
backgroundColor: 'transparent',
});
$(".nav").stop( true ).animate({
backgroundColor: 'transparent',
});
});
$(".nav a").mouseleave(function () {
$(".nav a").stop( true ).delay(300).animate({
backgroundColor: 'transparent',
});
$(".nav").stop( true ).animate({
backgroundColor: 'transparent',
});
});
}
Taking a cue from here:
https://stackoverflow.com/a/7317489/3485669
I present to you a jsFiddle which toggles some classes based on the scroll position of the overall body element (obviously, your selectors will be specific to you):
https://jsfiddle.net/vyxhxq94/1/
The code snippet below does not, for some reason, render the CSS transitions. However, the jsFiddle does. (Edit: seems the rendered code snippet isn't recognizing the :hover CSS class when the mouse enters it)
$("div.body").on("scroll", function(e) {
if ($("div.body").scrollTop() > 60) {
$("div.nav").addClass("notAtTop").removeClass("atTop");
} else {
$("div.nav").addClass("atTop").removeClass("notAtTop");
}
});
div.nav {
position: fixed;
width: 100%;
top: 0%;
left: 0%;
z-index: 9999;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.atTop {
background-color: white;
}
.atTop:hover {
background-color: transparent;
}
.notAtTop {
background-color: transparent;
}
.notAtTop:hover {
background-color: transparent;
}
div.body {
position: relative;
background-color: green;
margin-top: 60px;
height: 100vh;
overflow: scroll;
}
div.innerBody {
height: 4000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav atTop">
<h3>
<a>This is your nav bar.</a>
<span id="scrollTop">0</span>
</h3>
</div>
<div class="body">
<h1>
This is the rest of your body.
</h1>
<div class="innerBody">
Some lengthy content...
</div>
</div>
Ok, I've found an answer using colors.
var trans=false;
// Navigation function
$(".nav").mouseenter(function(){
var colore="rgba(255, 255, 255, 0)";
if($(".nav").css('background-color')==colore){
trans=true;
}else{
trans=false;
}
$(".nav a").stop( true ).animate({
backgroundColor: 'transparent',
});
$(".nav").stop( true ).animate({
backgroundColor: 'transparent',
});
});
$(".nav").mouseleave(function () {
if(trans==false){
$(".nav a").stop( true ).delay(300).animate({
backgroundColor: 'white',
});
$(".nav").stop( true ).animate({
backgroundColor: 'white',
});
}
});

Looping or repeatedly running a bunch of JQuery functions

I was learning JQuery on my own and yesterday night I stumbled upon a doubt and am stuck since then.
simple: I need the animation to repeat on loop. but it is not working, can you please help me out? I have tried setInterval, it is not working.
The fiddle is: https://jsfiddle.net/8v5feL9u/
$(document).ready(function(){
//window.setInterval(function(){
$(".img1").css({display:''});
$(".img1").animate({bottom: '300px', opacity: '1'}, 2000, function(){
$(".img1").fadeOut(700);
$(".img1").css({display:'none', bottom: '', opacity:'0'});
$(".img2").css({display:''});
$(".img2").animate({top: '300px', opacity: '1'}, 2000, function(){
$(".img2").fadeOut(700);
$(".img2").css({display:'none', top: '', opacity:'0'});
$(".img3").css({display:''});
$(".img3").animate({bottom: '300px', opacity: '1'}, 2000, function(){
$(".img3").fadeOut(700);
$(".img3").css({display:'none', bottom: '', opacity:'0'})
$(".img4").css({display:''});
$(".img4").animate({top: '300px', opacity: '1'}, 2000, function(){
$(".img4").fadeOut(700);
$(".img4").css({display:'none', top: '', opacity:'0'});
});
});
});
});
//});
});
thank you so much.
You can wrap your animation in a function and then call that function recursively in the last "animation complete" callback on the most nested part of the animation.
function doAnimation() {
$('.animate')
.hide()
.fadeIn(1000, function() {
$(this).fadeOut(1000, function() {
// recursively call our function in the inner-most animation callback
doAnimation();
});
})
}
// start out initial loop
doAnimation();
.animate {
padding: 30px;
background: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">animate me</div>
Without re-writing entire piece, you can provide a name for and call the function passed to .ready() within last nested .animate() callback function
$(function fn() {
$(".img1").css({
display: ''
});
$(".img1").animate({
bottom: '300px',
opacity: '1'
}, 2000, function() {
$(".img1").fadeOut(700);
$(".img1").css({
display: 'none',
bottom: '',
opacity: '0'
});
$(".img2").css({
display: ''
});
$(".img2").animate({
top: '300px',
opacity: '1'
}, 2000, function() {
$(".img2").fadeOut(700);
$(".img2").css({
display: 'none',
top: '',
opacity: '0'
});
$(".img3").css({
display: ''
});
$(".img3").animate({
bottom: '300px',
opacity: '1'
}, 2000, function() {
$(".img3").fadeOut(700);
$(".img3").css({
display: 'none',
bottom: '',
opacity: '0'
})
$(".img4").css({
display: ''
});
$(".img4").animate({
top: '300px',
opacity: '1'
}, 2000, function() {
$(".img4").fadeOut(700);
$(".img4").css({
display: 'none',
top: '',
opacity: '0'
});
// call `fn` again here
fn()
});
});
});
});
});
.bckgrnd {
width: 100vw;
height: 100vh;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is the end of the head tag-->
<!--this is the start of the body tag-->
<body>
<div class="bckgrnd w3-center w3-grey" style="position:absolute; z-index:-1">
<img src="https://s1.postimg.org/a51sj109n/image1.jpg" class="w3-image img1" style="width:100vw; height:148vh; margin-bottom: -48vh; position: fixed; left: 0px; opacity: 0;">
<img src="https://s1.postimg.org/57o7xwyaj/image2.jpg" class="w3-image img2" style="width:100vw; height:148vh; margin-top: -48vh; left: 0px; display:none; position:fixed; opacity: 0">
<img src="https://s1.postimg.org/k4woyxbiz/image3.jpg" class="w3-image img3" style="width:100vw; height:148vh; margin-bottom: -48vh; left:0px; position:fixed; display:none; opacity: 0">
<img src="https://s1.postimg.org/a8vlza5qz/image4.jpg" class="w3-image img4" style="width:100vw; height:148vh; margin-top: -48vh; left:0px; display:none; position: fixed; opacity: 0">
</div>
<div class="w3-container w3-black w3-center" style="z-index:1000 !important">
<h1>Hi how are you</h1>
</div>

Toggle Div on click

I want to modify this code for click event. But I am not able to do so. My requirement is to slide the panel on click (not hover) and again rollback on click (and not mouse out).
HTML
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&width=200&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle"><p>Facebook</p></div>
</div>
CSS
/* ===== Primary Styles ========================================================
Author: NTechi | WebsTutorial
========================================================================== */
body{
font-family:Arial;
}
#sidePanel{
width:245px;
position:fixed;
left:-202px;
top:15%;
}
#panelHandle{
background-image: -webkit-linear-gradient(top,#333,#222);
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-image: -o-linear-gradient(center top , #333333, #222222);
background-image: -ms-linear-gradient(center top , #333333, #222222);
background-image:linear-gradient(center top , #333333, #222222);
height:150px;
width:40px;
border-radius:0 5px 5px 0;
float:left;
cursor:pointer;
}
#panelContent{
float:left;
border:1px solid #333333;
width:200px;
height:300px;
background-color:#EEEEEE;
}
#panelHandle p {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
left: -4px;
margin: 0;
padding: 0;
position: relative;
top: 26px;
}
JavaScript
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});
jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
});
Any help would be really helpful.
Thanks in advance!
Use Toggle API Instead http://api.jquery.com/toggle-event/
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
Fiddle: http://jsfiddle.net/GPdFk/4812/
Simple way to do this. Change the hover event to toggle event.
Using your jsfiddle it would be something like this:
$(document).ready(function() {
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
It can easily be done using .toggle()
Here is the updated code:
jQuery(function($) {
$('#panelHandle').toggle(function() {
$('#sidePanel').animate({
'left': '0px'
}, 900);
}, function() {
$('#sidePanel').animate({
'left': '-202px'
}, 900);
});
});

Categories