How can I use Jquery to change image on hover with slide up transition? I've searched on the internet but I can't found a working code. All codes that I've found use fadeIn or fadeOut. Thank you very much!
This is the code that I found, but it uses fade in and out:
<script>
$(function() {
$('.change').mouseenter(function(){
$(this).slideUp('fast', function(){
$(this).attr('src', $(this).data('on'));
$(this).fadeIn();
});
});
$('.change').mouseleave(function(){
$(this).slideUp('fast', function(){
$(this).attr('src', $(this).data('off'));
$(this).fadeIn();
});
});
});</script>
AND html:
<img class="change" src="images/portofoliu/next.gif" data-on="images/portofoliu/prev.gif" data-off="images/portofoliu/next.gif">
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').hover(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});
http://jsfiddle.net/GFdW5/3/
http://api.jquery.com/slideUp/
EDIT: Final Solution: http://jsfiddle.net/hellomynameisluc/frTFw
Related
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
This is my first post. My code works in chrome and safari, but the slideshow won't stop in firefox. I want to show a live version of this code to make it easier, but I'm working locally. I'm wondering if its because I wrote it with hover instead of mouseover and mouseleave, but I dont know how to write it out correctly that way. There may even be an error in this code, but the browser is not detecting it.
HTML:
<div class="fadelinks">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
jQuery:
jQuery(document).ready(function($) {
$(".fadelinks").each(function(){
var $this = this;
$($this).hover(function(){
$('> :gt(0)', $this).hide();
timer = setInterval(function(){$('> :first- child',$this).fadeOut()
.next().fadeIn().end().appendTo($this);}, 1500);
}, function() {
clearInterval(timer);
});
});
});
a simpler way to achieve is to add onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" to each img tag
then in javascript
mouseoverFunction()
loop through image array
show next
wait
mouseoutFunction()
stop looping
you do not need the a tags
well you want that on mouse hover your images start sliding here is another code i am not so good in jquery but here is the code:
css
#fadelinks{
width: 100px;
height: 100px;
overflow: hidden;
}
set your image height and width equal to the width and height of fadelinks
HTML
<div class="fadelinks">
<a id="same1" href="#"> <img src=""/> </a>
<a id="same2" href="#"> <img src=""/> </a>
<a id="same3" href="#"> <img src=""/> </a>
<a id="same4" href="#"> <img src=""/> </a>
</div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>
jquery
var slide1 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
});
}
var slide2 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
});
} var slide3 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
});
} var slide4 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
});
you will understand what will this do but as i told you i am not so good in jquery so i have done this in you know in noob style. but from this you might get the idea and you can intregate this with event handler mousehover and mouseout and also use setinterval to slide automatically.
thanks.
So I have a little javascript code that swaps my main image on hover of the thumbnails that works perfectly well! is their a way to return to main on hover out I am sure there is a little if statement but i cannot figure it out!
<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div>
<div class="products">
<img src="img.jpg" width="200"/>
<img src="img1.jpg" width="200"/>
<img src="img2.jpg" width="200"/>
</div>
and the javascript is
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.products img').mouseover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var def_url = $('#main').attr('src');
$('.products img').hover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
}, function() {
$('#main').attr('src', def_url);
});
});
</script>
Try this...
$('.products img').mouseover(function() {
//do some action...
},function (){
//undo the action..
});
You can achieve this by using hover(). when you move mouse out of it , it restores original state and hovered gives you the required functionality.
So, it is a combination of two functions mouserover() and mouseout()
hope this helps..
You can make it in two ways:
1) use jQuery hover hover documentation
$(selector).hover(
function(){ alert("Hover in"); },
function(){ alert("Hover out); }
);
2) use <div> with background image and change it on hover with css
#selector{
background: url('image1.png');
}
#selector:hover{
background: url('image2.png');
}
I have an image which has to behave the following way:
When a user clicks on it the first time it the image should zoom-in and when clicked on the image again it should zoom-out.
Please help in figuring out how the two actions be performed by clicking on the image using jquery? Below is the code I have written for zooming in the image.
$('.tab1').click(function()
{
$(".GraphHolder").hide("slow");
$("#top-button-container").hide("slow");
$(".print").append('<button type="button">PRINT</button>');
$(this).animate({width: "70%"}, 'slow');
});
HTML:
<img id="pic" src="https://www.google.com//images/icons/product/chrome-48.png">
Jquery:
$(function(){
$('#pic').toggle(
function() { $(this).animate({width: "100%"}, 500)},
function() { $(this).animate({width: "50px"}, 500); }
);
});
Example at: http://jsfiddle.net/K9ASw/32/
Have you tried using toggleClass? You can use the optional [duration] parameter to specify how long you want the transition to take.
If really old or crappy browsers are'nt an issue, I'd go for CSS transitions, easier and smoother.
FIDDLE
**here is the script**
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Img1, #Img2, #Img3').mouseover(function () {
$(this).animate({ width: "122px", height: "110px" }, 100);
});
$('#Img1, #Img2, #Img3').mouseout(function () {
$(this).animate({ width: "118px", height: "106px" }, 100);
});
});
</script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">
$(function () {
$('.tab1').on('click', function()
{
if($(this).hasClass('zoomed')) {
$(this).removeClass('zoomed')
$(this).children('img').animate({width: "10%"}, 'slow');
}
$(this).addClass('zoomed')
$(this).children('img').animate({width: "70%"}, 'slow');
}
});
});
I removed all the code not pertaining to the image resize.
Also, if you're dealing with an image, you have to target the image tag, not the outer div.
If the image is applied to the .tab1 class as a background image then you're sol.
This really should not be this complicated, but can't figure it out.
Have several tabs vertically on the left along the body content section.
On page load, the "leftKanji" css = display:none. Want when mouse enters the link or "leftTab" class, then "leftKanji" css = disply:block
Currently either all the "leftKanji" shows or hides, not the one the mouse is hover over with. Bonus would be if I can add a "slow" or animate to it.
HTML:
<script type="text/javascript" >
$(document).ready(function(){
$('.leftTab').hover( function(){
$(".leftKanji").css('display', 'block');
},
function(){
$(".leftKanji").css('display', 'none');
});
});
</script>
<div class="mainTabSection">
<a href="#" class="leftTab">
<div class="mainTab"><img src="../" /></div>
<div class="leftKanji"><img src="../" /></div>
</a>
</div>
<div class="mainTabSection">
<a href="#" class="leftTab">
<div class="mainTab"><img src="../" /></div>
<div class="leftKanji"><img src="../" /></div>
</a>
</div>
When you say $('.leftKanji'), you refer to all elements with that class. The code below will get the element that is a child of the .leftTab element. You can change .children() to be any one of the traversing selectors in the jQuery api, but I used that one as an example. The important thing though is to use $(this), as it corresponds with the element that was hovered.
$(document).ready(function(){
$('.leftTab').hover( function(){
$(this).children(.leftKanji').css('display', 'block');
},
function(){
$(this).children(.leftKanji').css('display', 'none');
});
});
You could probably also do something like the following:
$('.leftKanji', $(this)).css('display', 'block')
or
$('.leftKanji', this).css('display', 'block')
Though I can't remember the exact syntax at this moment.
http://api.jquery.com/category/traversing/
$(document).ready(function(){
$(".leftKanji").css('display', 'none');
$('.leftTab').hover( function(){
$(".leftKanji").fadeIn('slow');
},function(){
$(".leftKanji").fadeOut('slow');
});
});
or
$(document).ready(function() {
$(".leftKanji").hide();
$('.leftTab').hover( function(){
$(".leftKanji").hide();
$(this).children().next(".leftKanji").show();
});
});