I have two images stacked on top of each other and trying to use it for navigation. On hover I am using jQuery to fadeTo 0 and back to 1 when cursor leaves. This is working but here is my problem. If you run the mouse cursor over the list item back and forth a few times, it is buffer the effects. How do I stop it from buffer? Thanks!
Script
$(document).ready(function () {
$("li").hover(function(){
$(this).fadeTo(250, 0);
},function(){
$(this).fadeTo(350, 1);
});
});
HTML
<div id="link1img"></div>
<ul>
<li id="link1">Home</li>
</ul>
CSS
#link1 {
background-image: url(../images/home_normal.png);
background-repeat: no-repeat;
text-indent: -9999px;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 10px;
}
#link1img {
background-image: url(../images/home_mo.png);
background-repeat: no-repeat;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 11px;
}
Stop the old effects using .stop() before continuing:
$(document).ready(function() {
$("li").hover(function() {
$(this).stop().fadeTo(250, 0);
}, function() {
$(this).stop().fadeTo(350, 1);
});
});
Use .stop(true) to cancel any animations currently in progress on that object and remove them from the animation queue so your next animation can start immediately and not have to wait until the current one finishes:
$(document).ready(function () {
$("li").hover(function(){
$(this).stop(true).fadeTo(250, 0);
},function(){
$(this).stop(true).fadeTo(350, 1);
});
});
See the jQuery reference on .stop() for more info.
Related
I have hamburger menu that comes in with an animation. When I click again on hamburger menu (after I have already escaped from the menu), the menu appears without animation.
I assume it is caused by .animate - I need to make .toggle
$(document).ready(function() {
$("#openMenu").click(function() {
$("#main").toggle(200);
$("#menuSection").toggle(200);
$(".menu").animate({ left: "2%" });
});
});
CSS:
.menu {
height: 100px;
width: 0px;
background-color: #450a5a;
display: flex;
position: absolute;
left: -50%;
cursor: pointer;
pointer-events: none;
transition: all 0.5s;
}
I assume that you click again on the #openMenu element to trigger menu closing animation when it's opened. Calling .animate that you have in your code again, after .menu element's style it already set to left: 2%; will not change anything. You have to implement code that will trigger either "out" animation or "in" animation depending on whether or not the menu is opened.
$(document).ready(function() {
$("#openMenu").click(function() {
$("#main").toggle(200);
$("#menuSection").toggle(200);
var menu = $(".menu");
if (menu.css("left") == "2%") { //if the "in" animation was already performed
menu.animate({ left: "0%" }); //revert back to normal
} else {
menu.animate({ left: "2%" }); //perform "in" animation
}
});
});
I'm trying to make a logo with some animated gifs with transparency. I want them to play when the other stops.
I have some letters as a logo in the background, and I want the gifs to play on top of it.
I tried with a slideshow script: the problem is that the duration of each gif is different, so if I put 10s for the gif to change, then the short ones will loop till the time is up.
i also tried making a CSS animation but it didn't work either, and I don't know why.
I haven't add transparency to the background of one of the gifs I used yet.
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');
},
10000);
});
#logo img {
width: 100%;
top: 0;
left: 0;
}
html {
background-color: black;
}
.fadein {
position: absolute;
width: 100%
}
.fadein img {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="logo">
<div class="fadein">
<img src="https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif">
<img src="https://media.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif">
</div>
<img src="https://media.giphy.com/media/1YcDQj7GctoBOIw22z/giphy.gif" alt="LOGO" />
</div>
I believe I've understod you correct, you got one logo as a background to have two different overlay effects looping in their own timeline which I've calculated to be about ~4450 to ~5500 millisecondss and ~18000 milliseconds. Using setInterval with a setTimeout should work. However, I'd suggest you do add those effects onto one single gif animation, however, you may do it by the browser, it doesn't matter unless you'd decide to look for web browser compability. This is what I've done for you, bywhat I've understod of your help request:
$(document).ready(function(){
$("div#logo img#overlayEffect").attr("src", "https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif?" + (new Date()).getTime());
setTimeout(function(){
$("div#logo img#overlayEffect").attr("src", "https://i.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif?" + (new Date()).getTime());
}, 5500);
setInterval(function(){
$("div#logo img#overlayEffect").attr("src", "https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif?" + (new Date()).getTime());
setTimeout(function(){
$("div#logo img#overlayEffect").attr("src", "https://i.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif?" + (new Date()).getTime());
}, 5500);
}, 24000);
});
body {
background: grey;
}
div#logo {
background: transparent url('https://media.giphy.com/media/1YcDQj7GctoBOIw22z/giphy.gif');
width: 480px;
height: 80px;
/*just for a center*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*these are /NOT/ required.*/
}
div#logo img#overlayEffect {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
<img id="overlayEffect" />
</div>
I need to change an image of one div while hovering over another. So far i have this
$('#button').on({
'hover': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
DEMO
But it doesn't work..
EDIT While it works in fiddle, the solution does not work in my local file.
Hover is deperecated with latest versions of jQuery. it is divided into two events mouseenter and mouserleave. use those event it will be helpful
As of 1.9, the event name string "hover" is no longer supported as a
synonym for "mouseenter mouseleave". This allows applications to
attach and trigger a custom "hover" event. Changing existing code is a
simple find/replace, and the "hover" pseudo-event is also supported in
the jQuery Migrate plugin to simplify migration. Reference
$('#button').on({
'mouseenter': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
$('#button').on({
'mouseleave': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/some_other.png');
}
});
If you still want to use hover events then there is direct hover function provided by jQuery, with reference
$( "td" ).hover(
function() {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}, function() {
// change to default on hover out
}
);
Looks like you need to change it on mouseover and reset on mouseout. If you use data-* attribute it will be easier.
$('#button').hover(function() {
var img = $('#ekranasStatic').data('toggle-src');
$('#ekranasStatic').attr('src', img);
}, function() {
var img = $('#ekranasStatic').data('original-src');
$('#ekranasStatic').attr('src', img);
});
.img {
/*** TURI BUT 850 PX **/
position: absolute;
margin-left: 520px;
top: 110px;
z-index: 99;
}
#button {
width: 50px;
height: 70px;
display: block;
position: absolute;
top: 296px;
left: 1120px;
background: url("http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/knopkes_zpsp3qr4xyn.png") no-repeat;
z-index: 2200;
cursor: pointer;
}
#button:focus {
outline: none;
}
#button:hover {
animation: knopke 0.1s steps(2);
animation-fill-mode: forwards;
background-position: 0 0;
}
#keyframes knopke {
to {
background-position: -100px;
opacity: 1;
}
}
#ekranasStatic {
width: 735px;
height: 602px;
display: block;
position: absolute;
top: 120px;
left: 375px;
z-index: 10000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img class="img" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/galerija3_zpszlnkhebp.png">
<div id="button"></div>
<div id="ekranai">
<img id="ekranasStatic" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-original-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-toggle-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png"
/>
</div>
Updated Fiddle
change this
$('#button').on({
'hover': function(){
to :
$('#button').hover({ function(){ });
try this :
$('#button').on('hover', function () {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
);
Js Fiddle Updated
I have a question regarding the stopping of more than one animation, I have some pseudo code code below to show my situation:
CSS
#aDiv
{
position: absolute;
background-image: url("gfx/nyancat.png");
width: 46px;
height: 50px;
background-size: 55%;
background-position: center center;
background-repeat: no-repeat;
}
JQUERY
function doAnimate(aDiv)
{
$(aDiv).animate({ //do stuff for first animation
height: (H*2)+"px",
width: (W*2)+"px",
left: "-="+(W*0.5)+"px",
top: "-="+(W*0.5)+"px",
opacity: 1
}, 500 , "linear", function()
{ $(aDiv).animate( //do stuff for second animation
{
height: H+"px",
width: W+"px",
left: "+="+(W*0.5)+"px",
top: "+="+(H*0.5)+"px",
opacity: 0.01
}, 500, function()
{ //call itself
doAnimate( aDiv );
}
);
}
);
}
//somewhere else in the code
doAnimate(aDiv);
When I call the stop() function on the aDiv ( $(aDiv).stop() ), does this stop both animations? The reason I'm asking is because that I have an animating div that is called upon window load, but upon calling stop and then restarting the animation - the animation doesn't run as it previously did so I have to refresh the page. Thanks
edit: fiddle added
Just using .stop() fulfils my requirement. I'm using JQuery 1.7 so the .finish() functionality isn't available to me. For my problem, changing the background size css value from auto to the original value (55% in my case) seemed to have fixed it.
I want to trigger an event whenever the user scrolls up or down inside an invisible div (a 'scroller'). Imagine the below setup :
CSS
#scroller {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 50px;
}
#scroller div {
position: absolute;
top: 0px;
left: 0px;
height: 50000px;
width: 100%;
}
span {
position: absolute;
top: 20px;
left: 100px;
}
HTML
<div id="scroller"><div></div></div>
<span></span>
Javascript
var timeout;
$("#scroller").scroll(function ()
{
clearTimeout(timeout);
$('span').text('scrolling');
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Whenever the user scrolls inside the above div, the word "scrolling" should appear on the screen. You can play around with this fiddle : http://jsfiddle.net/f1hxndt4/4/
There are two problems with the above :
Scrolling inside the 'scroller' obviously needs to be infinite (up and down) - Currently it only allows a 50000px scroll.
The "scroller" needs to be invisible. Currently the scrollbars are visible.
Any suggestions would be much appreciated, thank you!
Here is the solution in case anyone is interested : http://jsfiddle.net/f1hxndt4/14/
CSS
#scroller{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 50px;
overflow: hidden;
}
#scroller .parent{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100px;
overflow-x:hidden;
}
#scroller .child {
position: absolute;
top: 0px;
left: 0px;
height: 50000px;
width: 100%;
}
span {
position: absolute;
top: 20px;
left: 100px;
}
HTML
<div id="scroller">
<div class="parent">
<div class="child"></div>
</div>
</div>
<span></span>
Javascript
var timeout;
$("#scroller .parent").scroll(function ()
{
clearTimeout(timeout);
$('span').text('scrolling');
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Explanation :
You need to create a scrollable <div> : $('#scroller .parent') and then place that inside a narrower <div> : $('#scroller'). Set the overflow of the latter to 'hidden'.
That way the scrollbar on the right side of $('#scroller .parent') will not be visible anymore.
If you bind to the 'scroll' event, then you will need to make the area scrollable (which as you say, defeats the point of the what you're trying to acheive!). Instead, you need to listen for the events that would otherwise usually cause scrolling, such as listening for mousehweel events. You may also wish to listen for swipe events etc.
You can calculate scroll distance by using the wheelData property of the event to detemrine the scroll delta. (In Firefox and opera you will need to use the detail property instead.)
var onMouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll"
: "mousewheel";
var timeout;
$("#scroller").on(onMouseWheelEvent, function (e)
{
clearTimeout(timeout);
$('span').text('scrolling');
var scrollEvent = e.originalEvent;
var delta = scrollEvent.detail? scrollEvent.detail*(-120) : scrollEvent.wheelDelta
console.log(e.originalEvent.wheelDelta);
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Demo: http://jsfiddle.net/techsin/o2n2q5p4/
Improved: http://jsfiddle.net/techsin/o2n2q5p4/1/
This is similar to link you posted however it dosen't rely on scrolled up amount but creates its own amount relying on mousewheel data. I tried to solve your original problem instead.
if anything is unclear just ask: (no jquery used just for challenge)
var a=0, topSpeed = 20, deg=0;
window.addEventListener('mousewheel', function(e){
if (a<topSpeed) {
a = a + ((e.wheelDelta/1000) * topSpeed);
}
});
var img = document.getElementById('gear');
function animate() {
a = +(a*.95).toFixed(2);
if (Math.abs(a)<1) a=0;
deg = (deg+a) % 360;
img.style.transform = 'rotate('+deg+'deg)';
requestAnimationFrame(animate);
}
animate();