Develop Reference

Fade in and out background image on button hover - javascript

In a slider with background image as image of the slide, i want to change the background image when the mouse is hover a button, with a transition effect, and return to first image when the mouse leave the button. The first image have a blur effect while the second haven't it. I know how to change the image, but can't find a solution to apply a transition effect
$('#open-wowstyle').hover({
$('#img-wowstyle').css("background-image","image2.jpg");
});
$('#open-wowstyle').mouseleave({
$('#img-wowstyle').css("background-image","image1.jpg");
});
Also, I don't know why but the event "mouseleave" won't work.

Changing image by css url will not support css transition. You can place images in separate elements like DIV and position DIVs in exact same position using position: absolute. Now you can change the opacity of the DIVS on hover. The opacity property will support css transition.
Please check the below example. The ugly text is the image url from google. sorry for that.
$('.click').hover(function(){
$('.hover-bg-2').fadeOut(300);
});
$('.click').mouseleave(function(){
$('.hover-bg-2').fadeIn(300);
});
.me{
width: 300px;
height: 300px;
position: relative;
float:left;
border: solid 1px black;
}
.hover-bg-1,
.hover-bg-2{
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hover-bg-1{
background: yellow url('data:image/jpeg;base64,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');
}
.hover-bg-2{
background: red url('data:image/jpeg;base64,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');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me">
Im the content here
<div class="hover-bg-1"></div>
<div class="hover-bg-2"></div>
</div>
<button class="click">clickme</button>

You need to use :hover with animate, purly done with js and css no jquery.
#btn {
/* background-color: red; */
opacity: 0.6;
transition: 0.3s;
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
#btn:hover {
background-color: green;
opacity: 0.6;
transition: 0.3s;
background-image: url(https://s3.amazonaws.com/gazelle2.cdn.yolocare.com/sites/370/2015/05/line-art-icons-150x150-activity.png);
}
<button id="btn">Button</button>

Related

I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!

A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>

I'm trying to replicate the menu design used by:
https://www.pandaexpress.com/menu/appetizers
I think I am at the point where I need to use javascript/jquery, but I'm very new and unsure of my next step. When the user hovers over an image the image seems to slide into focus and display information below. I have tried to isolate this into separate actions, modeled by the following jfiddles:
https://jsfiddle.net/Lrqu8L0q/3/ (enlarges and focuses image on hover)
https://jsfiddle.net/4ud7wnop/1/ (slides down to reveal text on hover)
I tried combining them but when I add the
<p>This text is displayed on a downward slide after hover</p>
to the first jfiddle the paragraph isn't hidden.
Now I'm having trouble trying to think of a way to combine the both. I think I need to use javascript/jquery to create a function that applies the slide down to reveal text after the image enlarge has been completed. I'm very new to web design as a whole and am especially shaky with javascript and jquery.
I was wondering if I could write a function that checks if the image has expanded on enlarge yet, and after it's reached a desired height/width run the text slide function. Really not sure how to do this.. could someone point me in the correct direction?

I merged them together here: https://jsfiddle.net/danbovey/53ya31gm/
The main problem was, you need the image to be larger to cover over any detail text you may have.
I have commented on most changes I added in the fiddle. But here's the key parts:
I renamed the bg element to tile, it seemed more appropriate. Instead of working with height for the .slide-down class, I created a transform on the details div when the tile is hovered.
.tile:hover .details {
transform: translateY(150%);
}
You can learn about CSS transforms here: http://css3.bradshawenterprises.com/transforms/
The percentage of the transform can be calculated as the height of img / height of details - 300px / 200px = 150%
To create the growing effect, a pseudo :before element adds a white area the same size of the image before the tile, and when hovered, grows to 25px around each edge. And an identical element is added to the details div.
.tile:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
transition: all 0.4s ease;
content: '';
}
.tile:hover:before {
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
}

Is this what you want here?
https://jsfiddle.net/Lrqu8L0q/9/
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: 2px;
}
.bg:hover {
transform: scale(1.25)
}
.bg{
width: 150px;
height: 110px;
background-color: teal;
border-radius: 2px;
}
.slide-down {
border-radius: 3px;
height: 60px;
width: 150px;
position: relative;
transition: height 0.3s;
-webkit-transition: height 0.3s;
text-align: center;
overflow: hidden;
background-color: teal;
}
.bg:hover .slide-down {
height: 140px;
}
.container{
position: relative;
left: 150px;
top: 50px;
}
<div class="container">
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
</div>
Basically what you need to do is put both your requirement into 1 combined object (in this I mean put both the Image & Text inside 1 container) like in the above example
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
Both of them are put inside 1 container with class .bg, then what you want is to hover the container (not the thumbnail or description itself) and trigger both the scaling & slide-down the menu detail, you can do this by adding the CSS
.bg:hover { ... }
For the scaling, you need to put it together with the container so all the elements inside will be scaled to, then for the description inside it, you need to use
.bg:hover slide-down { ... }
This is where you set the animation that will expand the description of the menu (for explanation, this CSS will trigger on .bg hover, and applied to the element .slide-down inside of it)

How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.

You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!

If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.

In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}

I have an idea for a banner on my new site but I cant figure out how to do it or where to start so any help would be greatly appreciated.
Here's what im thinking:
I have three circle images and some text that i want to slide onto the screen from the left to right using an animation.
The first animation would be for some text and a circle to slide in from the left hand side of the screen.
The second animation would be for the text that is currently on the screen to slide right and fade away just before it hits the already existing circle image and for new text to slide in at the same time. Along with the text a second smaller circle would slide in and stop on top of the old bigger one.
The third animation would just be a repeat of the second animation but with a smaller circle image.
Example:
Again any help would be great and sorry for any previous confusion.
Many thanks Crackruckles.

You may wanna look at jquery ui toggle().
Simple example here https://jquerytipsntricks.wordpress.com/2013/07/21/slide-toggle-from-right-to-left-and-left-to-right-using-jquery-ui/comment-page-1/

Here is a similar one, you can just do some work around to fit your taste.
Sample
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
CSS:
#keyframes toright {
from {
right: 600px;
}
to {
right: 0;
}
}
.container {
padding: 0;
height: 100px;
width: 600px;
border: 1px solid red;
vertical-align:middle;
position: relative;
}
.container div {
display: inline-block;
background: rgba(0,0,255,0.3);
border-radius: 50%;
position: absolute;
right: 0;
top:5px;
}
.one {
width: 70px;
height: 60px;
animation: 1s toright ease;
}
.two {
width: 60px;
height: 50px;
animation: 1.3s toright ease;
}
.three {
width: 50px;
height: 40px;
animation: 1.5s toright ease;
}

Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.

I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.

Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.

I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}