How do I add smooth transitions to this script - javascript

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 :)

Related

How can I use jQuery variables for this image gallery overlay?

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 remove fadeIn?

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

jQuery mouseenter/leave

I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});

alternatives to jquery animate?

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")
}
);
​
​

Categories

Resources