I am using this code to change from one image to another:
<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />
I need help with the code so I can slow the transition from one image to the next.
The ideal solution to this would be rendering the two images and changing their opacity instead of changing src for the same tag. Something like :
<div id="container">
<img class="bottom" src="hero_image.png" />
<img class="top" src="selfie.svg" />
</div>
Once you are playing with the opacity, the transition effect can be applied using the following CSS :
#container img {
position:absolute;
left:0;
transition: opacity 1s ease-in-out;
}
#container img.top:hover {
opacity:0;
}
Related
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
CSS code:
div.albumTitleBackground {
position:absolute;
z-index:1;
background-color:whitesmoke;
/*top:2.5%;
left:2.5%;
right:2.5%;
bottom:2.5%;*/
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
transition:all 0.25s ease-in-out;
}
div.albumTitleText {
display:inline-block;
font-family:'Times New Roman';
font-size:6em;
position:absolute;
z-index:2;
color:darkgray;
top:50%;
left:5%;
}`
HTML code:
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
Problem: the idea is that background of the 'albumTitleBackground' div should be animated when user enters inside the element and must remain the same when user hovers the 'albumTitleText' div. Which way is the easiest one (and cross-browser as like) to achive that?
There are three ways to do this:
Two involve changing your HTML
1) As #melwynpawar says, you need to wrap your title div inside your background div.
<div class="albumTitleBackground">
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
And use CSS:
.albumTitleBackground:hover {
/* Animations Here */
}
2) You could wrap it all in a container div. Like so:
<div class="container">
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
And CSS:
.container:hover .albumTitleBackground {
/* Animations Here */
}
And then without changing your HTML
3) Two CSS rules
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
And CSS:
.albumTitleBackground:hover {
/* Animations Here */
}
.albumTitleText:hover .albumTitleBackground {
/* Animations Here */
}
This last one is not recommend because you will have to consistently check that the two rules are the same. Note that the animation will probably restart when you move from one div to the other.
Change your HTML structure to
<div class="albumTitleBackground">
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
You need to wrap the title text inside the Title background div
I'm using the fullPage.js script and so far I implemented the mechanism that invokes css animations while reaching one of the "slides", the code looks like this:
img{
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out;
}
#image-one{
z-index: 0;
}
#image-one.active{
-webkit-transform: translate3d(200px, 0px, 0px);
-moz-transform: translate3d(200px, 0px, 0px);
-ms-transform:translate3d(200px, 0px, 0px);
transform: translate3d(200px, 0px, 0px);
}
and later on in the javascript I have:
$(document).ready(function () {
$('#fullpage').fullpage({
'verticalCentered': false,
'responsive': 900,
'css3': false,
'anchors': ['one', 'two', 'three', 'four'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['one', 'two', 'three', 'four'],
'menu': '#menu',
'scrollingSpeed': 1000,
'scrollOverflow': 'true',
'afterLoad': function (anchorLink, index) {
if (index == 3) {
$('#image-one').addClass('active');
}
}
});
});
Ok, so now, after reaching slide no. 3 I'll have the animation of this element:
<img src="img/a.png" alt="a" id="image-one" />
And that works fine. However, on slide number 3 I put the plugin liquidSlider, which looks exactly like on the default settings on that webpage. And on each tab I wanted to put element that animates when user turns on that correct tab. The html code for it looks like this:
<div class="liquid-slider" id="slider-1">
<div>
<div id="images">
<img src="img/a.png" alt="a" id="image-one" />
</div>
<div class="sometext">
<h2 class="title">title1</h2><p>this image is animated when user sees it because this tab is active when user scrolls down the page</p>
</div>
</div>
<div>
<div id="images">
<img src="img/b.png" alt="a" id="image-two" />
</div>
<div class="sometext">
<h2 class="title">title2</h2><p>how can I animate this picture when user displays that tab?</p>
</div>
</div>
<div>
<div id="images">
<img src="img/c.png" alt="a" id="image-three" />
</div>
<div class="sometext">
<h2 class="title">title3</h2><p>and how can I animate this picture when user displays that tab?</p>
</div>
</div>
</div>
So how should I modify my script/create the new one to animate each element when the user selects the tab it's displayed on? Thanks, guys for help!
From what I noticed, the problem is the animations are applied to all the slides at once when you hit Slide 3. You could do a simple trick (maybe a work around) to make the animation trigger again and again when you leave or enter a tab.
If you also take a look into their Animate.css page they are doing the similar thing. Remove the class 'animated' and adding it again to animate the next slide as well. You could also do this by adding it into the transition function of your slider.
(note: Transition function needs a 'this.transition();' or it just hangs there.)
I would say something like this would do the trick
$('.liquid-slider').liquidSlider({
pretransition: function() {
$('#image-one').removeClass('active');
$('#image-two').removeClass('active');
$('#image-three').removeClass('active');
$('#image-one').addClass('active');
$('#image-two').addClass('active');
$('#image-three').addClass('active');
this.transition();
}
});
Haven't tested the code myself. So give it a try.
Hello there Stackoverflow.
I have a little job for my website i can't figure out on my own.
I have a box on the right, where i want all my sponsors, but instead of making the box really long, i just want a simple "slideshow" where it just fades into a picture, it stays for 3 seconds, and it fades into another picture. They're gonna be 90x90 most of them, however some may be different sizes and that shouldn't screw up.
I have a picture demonstrating, if you didn't get the concept from my poor english.
http://imgur.com/oPausP2
1=The sponsor picture. At this box it should slide between the different sponsors.
thanks in advance!
I use this on my company's home page. Here's a codepen for it. I like using CSS whenever possible and minimize the javascript.
The DOM:
<div class="slides_container">
<div class="slide"><img src="img1.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<div class="slide"><img src="img3.jpg"></div>
<div class="slide"><img src="img4.jpg"></div>
<div class="slide"><img src="img5.jpg"></div>
</div>
The CSS: Use the transition property to fade in and out. (Remember, you need to use vendor prefixes on transition to work with various browsers.)
.slides_container {
height:90px;
width:90px;
overflow:hidden;
position:relative;
}
.slides_container .slide {
position:absolute;
visibility:hidden;
opacity:0;
transition:opacity 1s ease, visibility 0s ease 1s;
}
.slides_container .slide.active {
visibility:visible;
opacity:1;
transition:opacity 1s ease;
}
The Javascript: This can be done without jQuery, but I'll use it here:
jQuery(document).ready(function($){
/*make sure the first element shows up*/
$('.slides_container .slide:first-child').addClass("active");
var active_slide = 0,
dom_slides = $('.slides_container .slide'),
num_slides = dom_slides.length,
myInterval = setInterval(function(){
if(active_slide>(num_slides*5+1))
clearInterval(myInterval);
changeSlide(++active_slide);
},6000);
function changeSlide(slide) {
if((slide = slide%num_slides)<0) slide+=num_slides;
dom_slides.removeClass('active').eq(slide).addClass('active');
}
});
(On my code, I added if(active_slide>(num_slides*5+1)) clearInterval(myInterval); That just stops the rotation after 5 cycles - so it's not just running forever. You can just delete those two lines if you want it to be infinite.)
Okay, explanation:
The CSS will apply visibility:hidden; opacity:0; to all of the .slide DOM elements. On .active state, the opacity transitions from 0 to 1 for 1 second (transition:opacity 1s ease;). Remember when .active state goes away, you need to delay the visibility for 1s so the opacity can transition, hence the visibility 0s ease 1s;.
In the Javascript, num_slides will count the number of .slide DOM elements; That variable will later be used with a modulo (%): slide % num_slides returns a whole number from 0 to the number of slides minus 1. We'll later use jQuery's .eq() method to select each DOM element in turn and apply the .active class to it.
Try something like this, do not forget you need the jquery library. DEMO working jsfiddle example with images from google.
Html:
<img src="" id="current" alt="" />
<ul class="slider">
<li><img src="http://p4.storage.canalblog.com/49/16/976515/75966520.gif" alt="" /></li>
<li><img src="http://www.graycon.com/wp-content/uploads/2013/01/Sponsor-Logos4.jpg" alt="" /></li>
<li><img src="http://forum.mmaglobal.com/files/mobilemarketingforum.com/Image/SponsorFooter_SanDiego_v9_2.jpg" alt="" /></li>
</ul>
Css:
ul.slider { display: none; }
jQuery:
<script src="/libraries/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var idx = 0;
var interval = 3000;
var images = $('ul.slider li img');
setInterval(function(){
idx++;
$('img#current').fadeOut(function () {
$(this).attr('src', $(images[idx%images.length]).attr('src')).fadeIn()
});
}, interval);
});
</script>
I'd recommend you to use a jquery slider. I have experience with jquery.cycle. It has many features and it's easy to install
http://jquery.malsup.com/cycle2/
I'm using jQuery 10.4.2 at the moment. I want to smoothly scale up an absolute positioned image. When I use the following code, I get no errors, but the animation does not occur. Instead, the image simply snaps to the full (100%) size.
HTML
<div class="box">
<img class="scaleMe" src="img.gif" />
</div>
CSS
.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }
JS
$('.scaleMe').animate({width:'100%'}, 2000);
What am I doing wrong?
Update:
Here is a jsFiddle that works: http://jsfiddle.net/s_d_p/27DhK/
But here is a live demo that doesn't work.
You don't have a src on your image tag. Try:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
http://jsfiddle.net/GZ8yX/
This is kind of lame, but if I capture the target width first and animate to that pixel value and then replace it with a percentage it works:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}