I have an image, and when I mouseover I want another image to 'slide' over the first image from the bottom up. On mouseout the image should disappear again, slide from top to bottom, showing the first image again.
How to do this with jQuery? I tried animate and slidetoggle, but I can't get it working.
EDIT: solution
<div class="image" style="width:90px;height:67px;position:relative;overflow:hidden">
<a href="#">
<img style="position:absolute;top:0;left;0;z-index:1;" class="first" src="images/stories/logos/in-dialoog.gif" alt="logo" />
<img style="position:absolute;top:0;left:0;z-index:0;" class="second" src="images/stories/logos/c-riders.gif" alt="logo" />
</a>
</div>
$('.image').mouseenter(function(){
$('.first').stop().animate({
top: '56px'
}, 800, function() {
// Animation complete.
});
});
$('.image').mouseleave(function(){
$('.first').stop().animate({
top: '0'
}, 800, function() {
// Animation complete.
});
});
Approximately something like this;
<style>
#wrap{width:200px;height:200px;position:relative;}
img{width:200px;height:200px;}
#img2{position:absolute;top:200px;left:0}
</style>
<div id='wrap'>
<img id='img1' src='blah' />
<img id='img2' src='blah' />
</div>
<script>
$(function(){
$('#wrap').mouseenter(function(){
$('#img2').stop().animate({top:'0px'})
})
}).mouseleave(function(){
$('#img2').stop().animate({top:'200px'})
});
</script>
... give or take a few variables
Or using your code (untested but should work);
<div id='wrap' style='position:relative'>
<img class="image" style="position:absolute;top:0;left;0;z-index:1;" class="first" src="images/stories/logos/in-dialoog.gif" alt="logo" />
<img style="position:absolute;top:0;left:0;z-index:0;" class="second" src="images/stories/logos/c-riders.gif" alt="logo" />
</div>
$('#wrap').mouseover(function(){
$('.second').animate({
height: 'toggle'
}, 800, function() {
// Animation complete.
});
}).mouseout(function(){
$('.second').animate({
height: 'toggle'
}, 800, function() {
// Animation complete.
});
});
Related
I have this code:
HTML
<div>
<img src="https://cdn3.iconfinder.com/data/icons/basic-2-blue-series/64/a-92-128.png" data-src-alt="https://cdn0.iconfinder.com/data/icons/sitemap-kit/64/sitemap_kit-52-128.png" alt="3" />
<img src="https://cdn2.iconfinder.com/data/icons/design-creativity-round/128/11-128.png" data-src-alt="https://cdn3.iconfinder.com/data/icons/flat-set-1/64/flat_set_1-03-128.png" alt="2" />
<img src="https://cdn1.iconfinder.com/data/icons/camera-and-photography-3/64/Person_Image-128.png" data-src-alt="https://cdn1.iconfinder.com/data/icons/modern-universal/32/icon-09-128.png" alt="3" />
</div>
JS
var overHover = function () { //zibi - efekt overhover
var newSourceImg = $(this).data('src-alt');
$(this).data('src-alt', $(this).attr('src'));
$(this).attr('src', newSourceImg);
}
$(function() {
$('img[data-src-alt]').each(function() {
new Image().src = $(this).data('src-alt');
}).hover(overHover, overHover);
});
How to make smooth photo fade in on hover? Of course, I mean the fadeIn() and fadeOut() methods.
Demo here: http://jsfiddle.net/Xampoo/6d495zkt/2/
There seems to be a time delay before the below mention functions starts to work. I'm not able to identify why it is so. Could anybody guide me on this??
The images do show initially but without the fade in or fade out effect but once all the images are done going the first loop, the animation works.
JS:
$(function fadeAnimation() {
$(".imageClass img:gt(0)").hide();
setInterval(function fadeAnimation() {
$(".imageClass :first-child")
.fadeOut(3000)
.next("img")
.fadeIn(3000)
.end()
.appendTo(".imageClass");
}, 5500);
});
HTML:
<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>
You have a couple issues in your code.
.imageClass are the <img>... You have to use the container's class, which is .slidesDiv.
You have to use the callback of the animations... Now, both .fadeIn() and .fadeOut are executing at the same moment.
Your timing is wrong... The animations are taking 6 seconds, but you have set the interval to 5,5 seconds.
See comments in code for the details.
$(function fadeAnimation() {
// Hide all image
$(".slidesDiv img").hide();
// Fade the first in right away.
$(".slidesDiv :first-child")
.fadeIn(3000);
// Start the interval to loo through all image
// The interval will execute for the first time in 6 seconds from now.
setInterval(function fadeAnimation() {
// Fade the first out.
$(".slidesDiv :first-child")
.fadeOut(3000, function(){ // This is a "callback" when the fade out is complete
// Fade In the next image
$(this).next("img")
.fadeIn(3000);
// append the faded out image to the end of the container.
$(this).appendTo(".slidesDiv");
});
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesDiv" id="cust">
<img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>
I'm using Cycle2 Carousel plugin and this plugin sets a class for my thumbnails it's not okey so far because this plugin set .cycle-pager-active class both image and div that's why I have to set this class for only images.if you check it out my #thumbnail div bottom of the body tag you will see (inspect element) I gotta fix this problem what should I do ?
What I tried ?
I change this line
pagerActiveClass: 'cycle-pager-active',
with this line:
pagerActiveClass: 'img.cycle-pager-active',
but nothing happend
$(document).ready(function(){
$(".mySlideShow").cycle({
pauseOnHover: true,
pagerActiveClass: 'cycle-pager-active',
pager: "#thumbnail",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item"
});
});
.mySlideShow img{
width:700px;
}
#thumbnail img {
margin:10px;
}
.cycle-pager-active{
border:3px solid orange;
}
<div class="mySlideShow">
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
</div>
</div>
<div id="thumbnail">
<div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
Codepen Demo
Even though I think a better approach is to play around with your HTML, and make sure the thumbnails div is only used for images, here is a solution to literally achieve what you asked for :)
Modify the addClass method
(function() {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("cssClassChanged");
// return the original result
return result;
};
})();
Then listen to cssClassChanged event and remove the active class from non img elements
$(document).ready(function() {
var $slider = $(".mySlideShow").cycle({
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item",
pagerActiveClass: "cycle-pager-active"
});
$("#single-pager > :not(img)").bind("cssClassChanged", function() {
$(this).removeClass("cycle-pager-active");
});
});
DEMO: https://codepen.io/anon/pen/ZJjEGQ
Just create a div that will have the thumbnail divas the child.
<div class="first-div">
<h1> Nice thumbnail! </h1>
<div id="thumbnail"></div>
</div>
Your code will only add the active class to the content inside the #thumbnail
hai im working with show/hide slider with div..evrything is working fine with my coding..
but i want my div or my content will auto hide when i click another button(image in my coding)..
i hope that anybody can help me with this..thanks in advance..
this is my html
<div id="slidingDiv">
<a href="#" class="show_hide" rel="#slidingDiv11">
<img src="../img/choose/mens.png">
</a>
<a href="#" class="show_hide" rel="#slidingDiv12">
<img src="../img/choose/womens.png">
</a>
<div id="slidingDiv11">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
<div id="slidingDiv12">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
</div>
<div id="slidingDiv1">
<a href="#" class="show_hide" rel="#slidingDiv16">
<img src="../img/choose/book.png">
<a>
<a href="#" class="show_hide" rel="#slidingDiv17">
<img src="../img/choose/textbooks.png">
</a>
<div id="slidingDiv16">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
</div>
<div id="slidingDiv17">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
</div>
</div>
this is my css
#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 {
height:300px;
padding:20px;
margin-top:10px;
border-bottom:5px;
display:none;
}
this is my js
$(document).ready(function () {
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View', // the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
if (options.changeText == 1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
With jQuery,
$("your_other_button").on('click', function() {
$("your_div_to_hide").hide();
});
Using Jquery
$("other_button").on('click', function() {
$("div_to_hide").toggle();
});
Since you want to hide the div when you click on a button, you should make it the document when clicked to hide. Try something like this.
$(".hide_show").click(function(event) { event.stopPropagation(); $(this).fadeToggle(1000);}); $(document).click(function() { $(".hide_show).fadeOut(1000); });
use event.stopPropagation(); to stop the document event to trigger .hide_show class. May be that will help you.
I have a simple jquery slideshow. I need to know how to change the interval time individually for each image
I only want the first image to be "9000" and the rest of them to be "3000"
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');}, 9000);});
</script>
<div class="fadein" >
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg"></div>
Just set a timeout for 9000, then set the interval for 3000:
$(function(){
function fade() {
$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');
}
setTimeout(function() {
fade();
setInterval(fade, 3000);
}, 9000);
});
This might be what you're looking for. It will at least give you something to play with.
http://jsfiddle.net/BjornJohnson/42b8X/
You set the durations you want as data attributes, which are used by the script to set the delay for a setTimeout.
Like:
<div id="x">
<img class="active" data-timeout="3000" src="https://si0.twimg.com/profile_images/2644394397/748dd7e11df8dbb93f0fcf2abc141526.png" />
<img data-timeout="1500" src="https://si0.twimg.com/profile_images/3379531545/ce1eed2263515e4a173dffc815e1a6fc.jpeg" />
<img data-timeout="5000" src="https://si0.twimg.com/profile_images/3632836331/6e3f4995bd41d49b724e13e694eb1a2d.jpeg" />
<img data-timeout="2000" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQb09ZMKsDuY5lko2JNEfnXb8_8HTfedS9Uuk_7fdcTGoH5Ps-Xxg" />
</div>