So far, I've tried a bunch of things to the effect of the following, without success:
<script type="text/javascript">
var x = 0;
while (true) {
/* change background-image of #slide using some variation
of animate or fadeIn/fadeOut with or without setTimeout */
x++;
}
</script>
Any ideas?
You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.
Here's a quick example of images fading one after the other.
HTML
<img src=".." />
<img src=".." />
CSS
img{
position:absolute;
z-index:-1;
display:none;
}
jQuery
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000* index).fadeIn(3000).fadeOut();
});
}
test();
Check working example at http://jsfiddle.net/RyGKV/
You can fade backgound-images!
in and out!
jQuery:
$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);
Edit:
This will fade the whole div not onley the background-image.
Although you can't directly fade-in a background-image. You can fade-in a solitary element containing only a background-image...
Here's an example
I got here because I was looking for a solution to fading background images based on a <select> option change. I combined what I had already written with Hussein's jsfiddle above and came up with this jsfiddle.net/v4BMC/.
This initially stacks two identical images on top of each other. When the <select> is changed, the top image's style attribute is removed, the bottom image's src is changed and the top image is faded out to reveal the bottom one. (The top image finishes with a style="display:none" which needs to be removed at the beginning of the operation, otherwise it doesn't work.)
Hope this is useful to someone else and not too irrelevant to be included here!
Here a demo to fade background-image by using the opacity and transition CSS properties with javascript/jQuery:
$( document ).ready(function() {
$( "#textarea" ).focusin(function(){
$( "#blur" ).css({
"opacity" : "1.0",
"transition" : "opacity 600ms ease-in-out"
});
}).focusout(function(){
$( "#blur" ).css({
"opacity" : "0",
"transition" : "opacity 600ms ease-in-out"
});
});
});
body {
background-size: cover;
background-image: url("https://vpsland.com/blog/wp-content/uploads/2016/04/linux-vps-benefits-g.jpg");
}
#textarea {
width: 50%;
}
#blur {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
background-image: url("https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/07/linux-overdrive.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5");
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input id="textarea" type="text" placeholder="Focus here to trigger the transition...">
<div id="blur"></div>
Related
I have jquery to change the background image when hovering on the text. I want to add a fade in effect.
here is the code I have now:
$(document).ready(function(){
$("#anatomyNow").hover(function(){
$("#bg").css("background-image", "url(image/anatomyNow5.png)");
}, function(){
$("#bg").css("background-image", "url(image/anatomyNow5.png)");
});
});
I tried to add the code below but it doesn't work.
$(document).ready(function(){
$("#anatomyNow").hover(function(){
$("#bg").fadeIn();
});
});
Update:
Thank you all for answering.
The effect I want is something like this:
https://www.christinewalthall.com/work
When you hover over the text, the background image will change. I have managed to do that, but the image changed too fast. I hope to add the effect so the image does not change dramatically.
fadeIn animates the opacity of an element, so using it in this context wouldn't work.
There's probably more than one way to achieve what you want here, but the one that comes to mind is layering images/divs with background images on top of each other and using css opacity transition on hover.
I did a bit of googling for you and here's a resource that shows how to go about that:
http://css3.bradshawenterprises.com/cfimg/
If I don't misunderstood your requirements then this is something you want.
$(document).ready(function() {
$("#effect").hover(function() {
$(this).animate({
opacity: '1'
}, "slow");
}, function() {
$(this).animate({
opacity: '0.5'
}, "slow");
});
});
#effect {
padding: 0.4em;
background: #555 url("https://thumb9.shutterstock.com/display_pic_with_logo/77318/1007648908/stock-photo-sunrise-beam-in-the-beautiful-park-1007648908.jpg");
opacity: 0.5;
}
#effect {
max-width: 490px;
height: 320px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="effect" class="ui-widget-content ui-corner-all"></div>
This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated
First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.
Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>
I use css to have animation (using transition) in a div. The content of the div is dynamical (can be 1 line or multiple lines).
I have 2 classes I switch to get the animation effect:
.class1{
max-height: 200px;
}
.class2{
max-height: 0;
}
My problem occurs when the I have only 1 line in the div, so there's "delay" until the 1 line disappears (because the height changes from 200px to 0 while the actual size is only 30px).
I tried to use element.style.maxHeight = elem.offsetHeight + "px" to set the max-height size but it didn't work so I want to change max-height in the class (class1 or class2) to fit the actual size.
How can I change the content of a class (I don't want to have: "style = max-height: 100px" in my div)?
You could use the transition in combination with the transform.
Not only because solve your problem, but also because has better performance then change the height.
Doesn't make sense changing the height and using CSS, in terms of performance you can use JS, it is the same.
I did an example for you on jsfiddle because on here seems to do not work.
jQuery(document).ready(function() {
jQuery('.click-me').on('click', function() {
var $this = jQuery(this);
if ($this.hasClass('show')) {
jQuery(this).removeClass('show').addClass('hide');
}
});
});
.hide {
transform: translateY(-100%);
z-index: -1;
}
.show {
transform: translateX(0);
z-index: 0;
}
.animate {
transition: transform 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
<div class="click-me animate show">
<div>one line</div>
</div>
</div>
I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.
What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/
Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!
You don't need JS for that, just use css3 transitions.
I have a div which currently has a static background image.
I need to create a slideshow of background images for this div.
I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.
I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.
Does anyone know of a good way to do this using jquery??
Here's some code which fades out/in but fades out the contents of the div too.
$("#slideshow").fadeOut(5000, function(){
$("#slideshow").css('background-image','url(myImage.jpg)');
$("#slideshow").fadeIn(5000);
});
HTML:
<div class="slideshow"></div>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
jQuery
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
jsfiddle Demo
How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?
HTML:
<div class="slideshow">
<h1>Text</h1>
<input type="button" value="Hello" />
</div>
<ul>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50/123456"></li>
<li><img src="http://placehold.it/50x50/dbca98"></li>
</ul>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
ul {position: absolute; top: 125px; left: 75px;}
li {
float: left;
border: 1px solid #000;
margin: 15px;
}
Javascript:
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
See it all together at http://jsfiddle.net/tatygrassini/R4ZHX/75/.
Instead of just changing the background image, you could first call
fadeOut()
then change source, and then call
fadeIn()
something like...
$('#image').fadeOut(500, function() {
$(this).attr('src', 'new-image.png')
.load(function() {
$(this).fadeIn();
});
});
To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.
You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the Jquery Tools tabs plugin.
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.