This is my code.
I want the images get larger after one second if I hold the mouse on each of them but there is no response from the setTimeout. Even when I put an alert() function at the beginning of the menuChanging() function, it runs but the rest of my code does not execute (it runs immediately, not after one second).
You are invoking the function menuChanging immediately on mouseover, instead you need to pass a function reference to setTimeout
$(function() {
$(".hormenu > div").hover(function() {
$(this).data('hoverTimer', setTimeout(menuChanging.bind(this), 1000));
}, function() {
var $this = $(this);
//if you move out before 1s then clear the timer
clearTimeout($this.data('hoverTimer'));
//when the mouse is moved out restore to initial state if required
if ($this.hasClass('current')) {
$this.toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, 750, 'easeOutBounce');
}
});
});
function menuChanging() {
var duration = 750;
$(".hormenu > .current").not(this).toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
$(this).removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
.hormenu {
height: 500px;
width: 1800px;
}
img {
height: 100%;
width: 100%;
}
.hormenu div {
width: 100px;
overflow: hidden;
display: block;
float: left;
height: 100%;
}
.other {
opacity: 0.5;
}
img {
width: 600px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="hormenu">
<div class="current">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/20c41d877dfbed0e52947f51846df781_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
</div>
Here you can find a solution to your issue.
$(function(){
$(".hormenu div").mouseover(
function()
{
setTimeout(menuChanging($(this)),1000);
}
);
});
function menuChanging(div) {
return function(){
var duration = 750 ;
if (!div.hasClass("current")) {
$(".current").removeClass("current").addClass("other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
}
div.removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
}
FIDDLE
You were calling the function and not passing it to setTimeout. I also changed some things to retrieve easily the div. The new function returns a function to call and this new function can access the first one's parameter.
Related
I'm trying to create a set of div's that will animate on hover. I'm using jQuery and the HoverIntent plugin to animate it.
The HTML
<body>
<div class="wrapper">
<div class="grow" style="background-color:#03045E;"></div>
<div class="grow" style="background-color:#0077B6;"></div>
<div class="grow" style="background-color:#00B4D8;"></div>
<div class="grow" style="background-color:#90E0EF;"></div>
</div>
</body>
... and the JS Code
$(function() {
$('.grow').hoverIntent({
over : function() {
$('.grow').animate({
'width':'15%'
},{duration:400,queue:false});
$(this).animate({
'width':'55%'
},{duration:400,queue:false});
},
out : function() {
//we need to check if the mouse is outside the main object to fire a back to original state. Hence, the mouse out effect on the containers itself should do nothing.
}
});
$('.wrapper').hoverIntent({
out : function() {
$('.grow').animate({
'width':'25%'
});
}
});
});
It is available here - https://jsfiddle.net/be0u3hfx/12/
I cant seem to understand why the last div flickers on hover of any div! Help!?
It's because during the size changes, the widths of the elements will occasionally amount to more than 100% total, and when that happens, the browser briefly wraps the last element, making it appear below the first. To prevent that, add display: flex; to your wrapper's CSS rules.
Fixed code:
$(function() {
$('.grow').hoverIntent({
sensitivity: 1, // sensitivity threshold
interval: 10, // milliseconds for onMouseOver polling interval
timeout: 500, // number = milliseconds delay before onMouseOut
over: function() {
$('.grow').animate({
'width': '15%'
}, {
duration: 400,
queue: false
});
$(this).animate({
'width': '55%'
}, {
duration: 400,
queue: false
});
},
out: function() {}
});
$('.wrapper').hoverIntent({
over: () => {},
out: function() {
$('.grow').animate({
'width': '25%'
});
}
});
});
* {
box-sizing: border-box;
}
body {
background-color: black;
margin: 0 auto;
padding: 10px;
height: 100vh;
width: 100%;
}
.wrapper {
padding: 10px;
height: 100%;
background: #fff;
display: flex;
}
.grow {
box-sizing: border-box;
height: 100%;
/* Original height */
width: 25%;
/* Original width */
float: left;
/* Just for presentation (Not required) */
position: relative;
/* Just for presentation (Not required) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.10.1/jquery.hoverIntent.min.js"></script>
<div class="wrapper">
<div class="grow" style="background-color:#03045E;"></div>
<div class="grow" style="background-color:#0077B6;"></div>
<div class="grow" style="background-color:#00B4D8;"></div>
<div class="grow" style="background-color:#90E0EF;"></div>
</div>
I have 2 pictures.
<div class="work-default-row">
<img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
<img class="img2" src="/files/ourWork/titleImages/img2.jpg"/>
</div>
In CSS
.work-default-row {
position:relative;
}
.img1 {
width:100%;
height:400px;
}
.img2 {
position:absolute;
top:0px;
left:3000px;
width:100%;
height:400px;
}
and JavaScript
$(".work-default-row").hover(function(){
$(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
$(".img2", this).stop().animate({left:"3000px"},
{queue:false,duration:200});
});
It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image)
Please, can somebody help me and tell me how can i make this images change effective?
If you have the width of the container you can set it to hide anything outside of it with.
#container_id{
overflow:hidden;
}
It looks like your using the work-default-view as your container.
Try this.
$(".slider").hover(
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "0" }, { queue: false, duration: 200 });
},
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "-100vw" }, { queue: false, duration: 200 });
}
);
.slider{
overflow: hidden;
}
.slider-inner {
width: 200vw;
position: relative;
display: flex;
flex-direction: row;
overflow:hidden;
}
img{
width: 100vw;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-inner">
<img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
<img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
</div>
</div>
Try changing width of img2 instead of left.
$(".work-default-row").hover(function() {
$(".img2", this).stop().animate({
width: "100%"
}, {
queue: false,
duration: 200
});
}, function() {
$(".img2", this).stop().animate({
width: "0"
}, {
queue: false,
duration: 200
});
});
.work-default-row {
position: relative;
}
.img1 {
width: 100%;
height: 400px;
}
.img2 {
position: absolute;
top: 0px;
width: 0;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/200" />
</div>
I am creating a custom image slider with custom slide effect in jQuery which has both next & previous buttons and also slides automatically with 5 seconds timeout. Although it works nicely in a quick look but sometimes( I dont know exactly when, maybe when I press the buttons or if I leave it open for some time and minimize the window) the iterval bugs and the slides change after 1 second or less. Also when i press the button i tell it to 1) clear iterval 2) change slide 3) set interval again which means that after i change a slide with the button the timer is set to 5 seconds from the start but this is not happening all the times.Here is the code.
$(document).ready(function() {
'use strict';
var $carousel = $('.carousel');
var $nextBtn = $('#next');
var $prevBtn = $('#prev');
var animationSpeed = 1000;
var pause = 5000;
var interval;
function nextSlide() {
$('.carousel__list').animate({
left: '-200%'
}, 500, function() {
$('.carousel__list').css('left', '-100%');
$('.carousel__item').last().after($('.carousel__item').first());
});
}
function prevSlide() {
$('.carousel__list').animate({
left: '0%'
}, 400, function() {
$('.carousel__list').css('left', '-100%');
$('.carousel__item').first().before($('.carousel__item').last());
});
}
function startSlider() {
interval = setInterval(function() {
nextSlide();
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$carousel.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$nextBtn.on('click', function() {
stopSlider();
nextSlide();
startSlider();
});
$prevBtn.on('click', function() {
stopSlider();
prevSlide();
startSlider();
});
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
width: 100%;
height: 65vh;
overflow: hidden;
position: relative;
}
.carousel__list {
width: 400%;
height: 100%;
left: -100%;
position: relative;
list-style: none;
}
.carousel__item {
width: calc(100% / 4);
height: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="carousel">
<ul class="carousel__list">
<li class="carousel__item" style="background-color: red"></li>
<li class="carousel__item" style="background-color: green"></li>
<li class="carousel__item" style="background-color: blue"></li>
<li class="carousel__item" style="background-color: yellow"></li>
</ul>
</section>
<button id="prev">PREVIOUS</button>
<button id="next">NEXT</button>
And here is a codepen: https://codepen.io/anon/pen/erpyJj
You are creating more intervals than you think and you don't actually clear each one because you overwrite the interval variable and then you don't a have a reference to the previous intervals, which may still be active.
What you could do is put every interval you create in an array, then when you need to stop all intervals, iterate through that array, clear each interval and empty the array.
// ...
var intervals = [];
// ...
function stopSlider() {
console.log("stopSlider() intervals (Before clear): ", intervals);
intervals.forEach(function(interval) {
clearInterval(interval); // stop one interval
});
intervals = []; // clear the array
console.log("stopSlider() intervals (After clear): ", intervals);
}
Here is your demo with many console logs. You can see that it doesn't matter how much you click on any button, the slider only automatically slides every 5 s.
$(document).ready(function() {
"use strict";
//cache dom elements
var $carousel = $(".carousel");
var $nextBtn = $("#next");
var $prevBtn = $("#prev");
var animationSpeed = 1000;
var pause = 5000;
var intervals = [];
function nextSlide() {
console.log("nextSlide() intervals: ", intervals);
$(".carousel__list").animate({
left: "-200%"
}, 500, function() {
$(".carousel__list").css("left", "-100%");
$(".carousel__item")
.last()
.after($(".carousel__item").first());
});
}
function prevSlide() {
console.log("prevSlide() intervals: ", intervals);
$(".carousel__list").animate({
left: "0%"
}, 400, function() {
$(".carousel__list").css("left", "-100%");
$(".carousel__item")
.first()
.before($(".carousel__item").last());
});
}
function startSlider() {
console.log("startSlider() interval (BEFORE): ", intervals);
var interval = setInterval(function() {
nextSlide();
}, pause);
intervals.push(interval);
console.log("startSlider() interval (AFTER): ", intervals);
}
function stopSlider() {
console.log("stopSlider() intervals (Before clear): ", intervals);
intervals.forEach(function(interval) {
clearInterval(interval); // stop one interval
});
intervals = []; // clear the array
console.log("stopSlider() intervals (After clear): ", intervals);
}
$carousel.on("mouseenter", stopSlider).on("mouseleave", startSlider);
startSlider();
$nextBtn.on("click", function() {
stopSlider();
nextSlide();
startSlider();
});
$prevBtn.on("click", function() {
stopSlider();
prevSlide();
startSlider();
});
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
width: 100%;
height: 20vh;
overflow: hidden;
position: relative;
}
.carousel__list {
width: 400%;
height: 100%;
left: -100%;
position: relative;
list-style: none;
}
.carousel__item {
width: calc(100% / 4);
height: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="carousel">
<ul class="carousel__list">
<li class="carousel__item" style="background-color: red"></li>
<li class="carousel__item" style="background-color: green"></li>
<li class="carousel__item" style="background-color: blue"></li>
<li class="carousel__item" style="background-color: yellow"></li>
</ul>
</section>
<button id="prev">PREVIOUS</button>
<button id="next">NEXT</button>
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>
I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.