I have a cart on my website, I have maked a kind of graphic as image, that appear as bacground behind the cart when :hover.
But I was wondering how I can make this object fade/appear slowly on :hover, instead of instant as it is now.
I tried to copy the html and css from my website, but it looks bad in jsfiddle.
http://oliver.kaspertoxvig.dk/
I am not sure if this is the preferred way of doing it, but if you are using the jQuery library, this should do the trick:
$(function () {
$(".cart-css-class").hover(
function () {
// Fade in on hover
$(this).stop().animate({ "opacity": "1" }, "slow");
},
function () {
// Fade out when no longer hover
$(this).stop().animate({ "opacity": "0" }, "slow");
});
});
This assumes your element has the css class cart-css-class. To hide it on load, you should apply this CSS:
.cart-css-class {
opacity: 0;
}
Related
I am trying to add animation to my dropdown-menu ... It is working perfectly on large screens but on small phones and tablets (when toggle navigation appears) there is a problem: when it should slide up the drop-down list disappears without sliding up properly as you can see in my
DEMO . Please try to open in it in small browser size and click on "services" to slide down and up .
I have tried another solution using jquery:
$(function () {
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function (e) {
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function () {
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false');
});
});
});
But as you can see in this Bootply DEMO (resize your browser to a phone screen size), when sliding down, at the end there is a gray space that appears then disappears directly.
What I really need is a normal working slide animation down and up. Any suggestions of how can I adjust at least one of both methods?
I find the solution , you should remove the scrollbar from the navbar.
so add this simple code to your css file :
.navbar-collapse {
overflow: hidden;
}
you can take a look at the Demo here : https://jsfiddle.net/u9pvtLpw/2/
I have found a few ways to to expose the collapsible accordion function in bootstrap, however I am unable to customise it in a way that only one panel-collapse is triggered when hovering the div.panel-heading > a element.
I am doing the following:
$('div.panel-heading a').hover(function () {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
});
}
But whenever I hover over the a element all panel-collapse elements open and close. How can I isolate each if they are not children of panel-heading?
Fiddle here: http://jsfiddle.net/Tupira/084z33g5/1/
Try this code:
$('div.panel-heading a').hover(function () {
$('.panel-collapse', $(this).closest('.panel')).collapse('show');
}, function() {
$('.panel-collapse', $(this).closest('.panel')).collapse('hide');
});
On my site I have a contact button that when pressed slides a div containing a contact form downwards (using jQuery animate). This div has a close button in it that when pressed slides it back up (it's original position is off the screen). I need to make it so when the contact button is pressed, it only works once but then works again when the div has been closed.
I know this uses the bind / unbind function, however I can't get it working. Here is my code:
$(document).ready(function() {
var handler = function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
}
$('#contact').bind('click', handler);
$('#contact').unbind('click', handler);
});
$('#close').click(function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
});
the site where I'm trying to add it into is here: www.samskirrow.com/projects/move_div
Thanks for your help.
Sam
Figured it out, decided not to use bind, unbind commands but instead toggle. I have a close button that just takes on the role of the open button, therefore it doesn't disrupt the toggle cycle.
$(document).ready(function() {
$('#contact').toggle(function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
},function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
})
$('#close').click(function() {
$("#contact").click();
});
});
Hope this is useful to someone :)
Refer to this fiddle Please.
What I am trying to do is on hovering on a-tag inside #menu ul li, the background-color color of #header-bottom must also changed as of similar to background-color of the a-tag.
How can I achieve this?
UPDATE
Done this with CSS only yippie! :) Here is the fiddle
Here is a jQuery method (sorry too much effort to make this javascript only for me). It could be translated though.
http://jsfiddle.net/PCbVs/9/
$('.menu').hover(
function() {
var color = $(this).css('borderLeftColor');
console.log(color);
$('#header-bottom').css('backgroundColor', color);
}, function() {
});
Or with jQuery UI animated style transitions.
http://jsfiddle.net/PCbVs/10/
$('.menu').hover(
function() {
var color = $(this).css('borderLeftColor');
console.log(color);
$('#header-bottom').stop().animate({ backgroundColor: color }, 500);
}, function() {
});
I'm trying to create an effect where when you hover over a list item it changes the opacity of an image (in a completely different div) from 0 to 1. I have no trouble doing it in CSS when hovering over the img itself or its parent elements. But this is stumping me. Here's what I have (I'm really new to jquery, so it may be all wrong).
<style>
#img-nav img {opacity:0.0;}
#img-nav:hover img {opacity:1.0;}
</style>
<div id=header>
<ul id="nav">
<li id="one">item1</li>
<li id="two">item2</li>
<li id="three">item3</li>
</ul></div>
<ul id="img-nav">
<li><img src="one.jpg" id="img-one"/></li>
<li><img src="two.jpg" id="img-two"/></li>
<li><img src="three.jpg" id="img-three"/></li>
</ul>
And my questionable jquery:
$("#one, #two, #three").hover(function(){
$("#img-one, #img-two, #img-three").css({ opacity:1.0 });
});
I guess one thing that's wrong is that I need three different hover declarations for each of the three li/img combinations. Like I said, I'm very new to jquery, so sorry if the answer is simple. I did search the boards and couldn't find a solution. Of course, I'd rather find a css solution but I don't think there is one.
Update/Solution:
#Jason. Here's your jquery changed a little to do exactly what I wanted. I got rid of the first declaration since I already had opacity set to 0 in the CSS and didn't need jquery to do it. Then hovering over the li changes the images opacity with .css. The issue was using .css to change the opacity back to 0. It was keeping the inline style declaration, which was screwing with the rules in my stylesheet. So now when hover ends, I just remove the inline style attribute altogether with .removeAttr ('style').
Thanks for the help!
$("#one").hover(function () {
$('#img-one').css({opacity : 1.0});
},
function () {
$('#img-one').removeAttr("style");
}
);
$("#two").hover(function () {
$('#img-two').css({opacity : 1.0});
},
function () {
$('#img-two').removeAttr("style");
}
);
$("#three").hover(function () {
$('#img-three').css({opacity : 1.0});
},
function () {
$('#img-three').removeAttr("style");
}
);
There is probably a more elegant way to do this... but the quick and dirty:
$("#img-one, #img-two, #img-three").css('opacity','0');
$("#one").hover(function () {
$('#img-one').css({opacity : 1.0});
},
function () {
$('#img-one').css({opacity : 0.0});
}
);
$("#two").hover(function () {
$('#img-two').css({opacity : 1.0});
},
function () {
$('#img-two').css({opacity : 0.0});
}
);
$("#three").hover(function () {
$('#img-three').css({opacity : 1.0});
},
function () {
$('#img-three').css({opacity : 0.0});
}
);
http://jsfiddle.net/jasongennaro/KdhPG/
Your code looks like :
$(".one, .two, .three").hover(function(){
$(".img-one, .img-two, .img-three").css({ opacity:1.0 });
});
it should be:
$("div#header li").hover(function() {
$("#img-one, #img-two, #img-three").css({ opacity:1.0 });
},function () {
$("#img-one, #img-two, #img-three").css({ opacity:0.0 });
});
In Jquery you can call item by its id by denoting with #sign and class with .(dot) sign
NEW UPDATE:
See the final demo as you want: http://jsfiddle.net/rathoreahsan/7NCQu/20/