So i currently have multiple images on a page, however when i want over hover effect on the one that is being hovered over. Where the page has more than 12 images, one way is to replicate this code 12 times, with an id but is there a more efficient way:
$("img").hover(function () {
$("img").addClass("transition");
}, function () {
$("img").removeClass("transition");
});
You could use in/out hover handler to toggle the class:
$("img").hover(function () {
$(this).toggleClass("transition");
});
But be aware, this could be done using only CSS with pseudo class :hover if your goal is just to apply transition to these images.
In order to apply hover effect only on currently hovered image and not on the other images, use $(this) as shown below :-
$("img").hover(function () {
$(this).addClass("transition");
}, function () {
$(this).removeClass("transition");
});
Related
I am working on a shopify website, What I am trying to achieve is, When you hover over menus on the website, Currently it is showing two products with the name (Most Popular Product) there are two different products, So what I am trying is hide Demo product on hover over first menu title and show Demoproduct2 and hide Demo product2 on hover over second menu title and show Demoproduct
I have Given them different ids also
Latest Arrivals:#tabbs0
Editors Picks:#tabbs5
DemoProduct:menuproductone
Demoproduct2:menuproducttwo
This is my website url: https://amused-dev.myshopify.com/
So far I have tried this
jQuery(document).ready(function() {
jQuery("a#tabbs0").hover(function() {
jQuery('div#menuproductone').show();
}, function() {
jQuery('div#menuproducttwo').hide();
});
jQuery("a#tabbs5").hover(function() {
jQuery('div#menuproducttwo').show();
}, function() {
jQuery('div#menuproductone').hide();
});
});
Use the show() and hide() functions together.
You are using two functions inside each hover event.
The first function binds to mouseenter event
The second function binds to mouseleave event
Avoid that and you are good to go.
jQuery(document).ready(function() {
jQuery("a#tabbs0").hover(function() {
jQuery('div#menuproductone').show();
jQuery('div#menuproducttwo').hide();
});
jQuery("a#tabbs5").hover(function() {
jQuery('div#menuproducttwo').show();
jQuery('div#menuproductone').hide();
});
});
I have a div, which changes the image on hover.
I want the div img to be changed with fade effect on hover, but when it's clicked i want the image to be changed to another image again.
I have the below codes, and it sort of works. when the image is clicked it changes to the image i want but when it's on hover, it changes back, with fade effect to the previous image. can anyone help?
HTML
<div id="mydiv_01"><img src="images/myimage_01.png" style="position:absolute;" id="my image_01"/>
<img src="images/myimage_02.png" style="position:absolute;display:none;" id="myimage_02" alt=""/></div>
JavaScript
$("#mydiv_01").hover(function() {
$("#mydiv_01 img").fadeToggle('medium');
});
$("#mydiv_01").click(function(){
$("#mydiv_01 img").attr('src','images/myimage_03');
});
You need some of the actions you want separated into functions as follows:
reset();
function reset() {
$('#myimage_01').attr('src', 'images/myimage_01.png');
$('#myimage_02').attr('src', 'images/myimage_02.png');
$("#mydiv_01").hover(function () {
$("#mydiv_01 img").fadeToggle('medium');
});
setClick();
}
function setClick() {
$("#mydiv_01").click(function () {
$("#mydiv_01 img").attr('src', 'images/myimage_03');
$(this).unbind('mouseenter mouseleave');
$(this).click(function () {
reset();
});
});
}
The reset() at the beginning is basically setting your images back to the originals and binding your hover functions and click functions. But the click function setClick() changes your images to the third one and binds a new click function that resets again when you click the third image.
As per your code once you click on div,the image src will get cgange to myimage_03,if you again bind hover it will show same image on hover.
*$("#mydiv_01 img").attr('src','images/myimage_03');*
it will change all div images to myimage_03.
I need to zoom image with Kenburns effect by clicking. This doesn't work, however.
Code:
$(document).ready(function () {
$('.kenburns').on('click', function () {
$('.kenburns').addclass('img.zoom');
});
});
JSFiddle
Your jQuery code has a few issues:
First, addclass should be addClass. Javascript is case-sensitive.
Second, the element addClass is attached to is for the parent div, not the image itself. Essentially you were trying to apply the CSS transform to the div instead of the image, while you actually want to apply it to the image. To add the class to the image and not the parent div, use as your selector:
$('.kenburns img')
instead of ...
$('.kenburns')
Alternatively, and perhaps more performantly, you can use
$('.kenburns').children('img')
Finally, the class name you were trying to add to the image is incorrect. addClass accepts the CSS class name ("zoom"), not the CSS selector ("img.zoom").
Corrected code:
$(document).ready(function () {
$('.kenburns').on('click', function () {
$('.kenburns img').addClass('zoom');
});
});
Working JSFiddle
I'm attempting to create a mute button (it already has an onclick function) on a site using a div with a background image. I would like to be able to change the displayed image after clicking on it (mute), but I also need to change it back after a second click (unmute). How can this be done?
The site already uses jquery.
Thank you!
Have a look at toggleClass(). You just need two CSS classes, one with each background image e.g.:
.mute {
background-image:url('mute.png');
}
.unmute {
background-image:url('unmute.png');
}
Then the jQuery would be (assuming you have a div named "button", with class "unmute"):
$('#button').click(function() {
$(this).toggleClass('mute');
});
You want jQuery's .toggle() which takes multiple function arguments and calls each in turn after each click event.
$("#mutebutton").toggle(
function() {
$(this).css("background-image","url('on.jpg')");
mySoundOn();
},
function() {
$(this).css("background-image","url('off.jpg')");
mySoundOff();
}
);
Use .removeAttr() if the background image is the only think applied inline. If not, then use .css() and change the path to the original background image.
$(this).toggle(function() {
$(this).removeAttr('style');
},
function() {
$(this).css("backgroundImage", "url(mute_img_path)");
});
its easy
<div id="img-swap" />
where xxxxxx_Off is you image for mute
$(function(){
$("#img-swap").on('click', function() {
if ($(this).attr("class") == "img-swap") {
$(this).css("background-image","on.jpg");
} else {
$(this).css("background-image","off.jpg");
}
$(this).toggleClass("on");
});
});
this will switch image on click from off to on. you must use a pattern for images that will contain _off and _on suffix
I have this jQuery call for a dropdown. On click, the background image of an inner container changes its background image. How do I change the background image for the inner container back?
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").css("background-image","url(carrow.png)");
});
});
I suggest using toggleClass():
CSS
.yourNewBackground {
background-image: url(carrow.png);
}
JavaScript
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").toggleClass("yourNewBackground");
});
});
EDIT
Here's a working fiddle. A couple things to note:
When working with a fiddle, make sure you select the appropriate framework. You had MooTools selected (the default), instead of jQuery.
toggleClass() wasn't working because of the span class. Adding !important to the toggleDown class was all that was needed.
If the background is set in a style sheetfile, you can just delete the custom style-attribute you created there:
$(".span").css('background-image', '');