I'm working on a simple landing page. I have a jquery file but i dont really know how to hide the fade. I mean i just want to animate the 5 image without fade. What do u think where is the probelm ?
http://yourjavascript.com/13873144111/jquery.js - jquery
$(document).ready(function() {
$(".start").click(function() {
$.when($('.start2').fadeIn(2000)).done(function() {
$.when($('.start3').fadeIn(2000)).done(function() {
$.when($('.start4').fadeIn(2000)).done(function() {
$.when($('.start5').fadeIn(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").fadeIn(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
Well, there's something you don't understand, you're actually using the fadeIn animation, so to 'Hide' it, like you asked you have to actually not use it. If you want the stuffs to appear with no fading, you can either use slideDown, your own .animate to create custom animation or show instead of fadeIn.
So to simply use slideDown, you would do this.
<script type="text/javascript">
$(document).ready(function()
{
$(".start").click(function()
{
$.when($('.start2').slideDown(2000)).done(function() {
$.when($('.start3').slideDown(2000)).done(function() {
$.when($('.start4').slideDown(2000)).done(function() {
$.when($('.start5').slideDown(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").slideDown(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
</script>
And maybe use slideUp instead of hide
Related
so I'm making a portfolio gallery as a part of a website I'm building for a little practice.
On hover I'm trying to get an overlay, as this didn't work on phones I thought it would be a good idea to make a jquery fallback. This is my code:
$(document).ready(function(){
$('.overlay-1').mouseenter(function() {
$(this).css('opacity', '1')
$(this).mouseleave(function() {
$(this).css('opacity', '0')
});
});
$('.overlay-2').mouseenter(function() {
$(this).css('opacity', '1')
$(this).mouseleave(function() {
$(this).css('opacity', '0')
});
});
$('.overlay-3').mouseenter(function() {
$(this).css('opacity', '1')
$(this).mouseleave(function() {
$(this).css('opacity', '0')
});
});
});
It goes on in this fashion, to enable users to see the overlay when a certain image is clicked. Surely there is a better way of writing all this? Maybe using variables, I'm not sure
Thanks guys!
I would give each overlay the same class and then toggle a class that lowers/raises the opacity on click (not mouseenter/mouseleave since its for mobile fallback). For example:
JS Fiddle
New class to add/remove on click:
.opacity-lower {
opacity: 0;
}
JQuery - Toggle Class
$(document).ready(function () {
$('.overlays').click(function () {
$(this).toggleClass('opacity-lower');
});
});
function show() {$(this).css('opacity', 1);}
function hide() {$(this).css('opacity', 0);}
[1,2,3].forEach(function(num) {
$('overlay-'+num).mouseenter(show).mouseleave(hide);
});
How do I add smooth transitions when display block and hide:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').css({ display: "block" });
$(this).find('.boxDisc').css({ display: "block" });
$(".userBox").mouseout(function () {
$(this).find('.inBox').css('display', 'none');
$(this).find('.boxDisc').css('display', 'none');
});
});
});
Because right now it's instant and doesn't look good.
Thanks!
One way is to use jQuery fading methods:
$(document).ready(function () {
$(".userBox").mouseover(function () {
$(this).find('.inBox').stop().fadeIn('fast');
$(this).find('.boxDisc').stop().fadeIn('fast');
$(".userBox").mouseout(function () {
$(this).find('.inBox').stop().fadeOut('fast');
$(this).find('.boxDisc').stop().fadeOut('fast');
});
});
});
Example:
http://jsfiddle.net/L9t4J/
You could try fadeIn and fadeOut:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').fadeIn(500);
$(this).find('.boxDisc').fadeIn(500);
$(".userBox").mouseout(function () {
$(this).find('.inBox').fadeOut(500);
$(this).find('.boxDisc').fadeOut(500);
});
});
});
using jQuery methods such as show('slow'), hide('slow'), toggle('slow') will make transitions smoother.
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/
Other useful, playful and great methods are .animate() and jQuery ui's slide effects (https://api.jqueryui.com/slide-effect/)
Cheers!
Edit: I was going to write about the fadeIn and fadeOut methods too. But Maurice Perry was quicker to point those out with an example :)
On hover I want my div to scroll down.
I know i can use the .animate({left: 0}, "slow"); but this doesnt go down but what else does jquery have to offer?
Here is my jsfiddle: http://jsfiddle.net/WZvPk/4/
hover over the sectors box and you will see the "view project" move down. I need it to move down in a slow fashion similar to http://www.jeremymartin.name/examples/kwicks.php?example=3
Then need the opacity to be so my image is darker.
edit: slide down wont work with this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
You probably want jQuery slideDown, see: http://api.jquery.com/slideDown/
Edit:
So something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.css("display", "block")
.css("margin-top", "-5px")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
You could also, add a css class with the margin-top and display-block property, like:
.slideDown { display: block !important; margin-top: 5px !important; }
/* !important so they won't be overwritten..*/
Then you can do something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.addClass("slideDown")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
What about css3 transitions? They are smooth and are starting to be widely supported.
Here's an example which doesn't use javascript at all.
Update : Another example that doesn't use opacity.
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, "slow");
},
function () {
$(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
}
);​
​Now it works
$(".sectorGrid").hover(
function () {
$(".showme").css("margin-top", "-25px");
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, 'slow');
},
function(){
$(".showme").css("display", "none")
}
);
​
​
I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!
http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});
Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});
Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.
$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});
Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.
I am trying to fade each element in a div to fadeIn (in) succession. I know how to fade in the whole block but not each individual div.
http://jsfiddle.net/reggi/Km55n/
$('#button').click(function() {
setTimeout(function() {
$('#divWithDivs').fadeIn(500);
}, 300);
});
You need to fade the next div in the completion callback of the previous one.
For example:
function fadeAll(elems) {
elems.filter(':hidden:first').fadeIn(1000, function() { fadeAll(elems); });
}
fadeAll($('#parent div'));
Demo
Note that you'll need to hide the children, not the parent.
You could do something like this:
$('#button').click(function() {
var show_next = function(elem) {
if (elem.length) {
elem.fadeIn(300, function () {
show_next(elem.next());
});
}
};
show_next($('div#divWithDivs').children().first());
});
$('#divWithDivs').children().first().fadeIn(500, function() {
$(this).next().fadeIn(500, arguments.callee);
});
Here the demo based on your: http://jsfiddle.net/Km55n/2/