How to hide div slowly in javascript - javascript

I have two div when I click button to close the div. second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance.
fiddle

http://jsfiddle.net/ssZXA/185/
read the documentation about .hide()
the first argument is "duration"
You can use $("#notice").hide('slow');

use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
Jsfiddle

Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();

Plz try this:
$("#notice").hide("slow");
Thanks.

Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO

Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
Demo

$("#notice").hide('fade','slow');
DEMO
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax:
$("selector").hide('type',time);

Try with this.
<body>
<div id="myDiv" style="width:200px;height:150px;background-color:red;">
This is the div that will fade out, slide up, then be removed from the DOM.
</div>
<input id="myButton" type="button" value="Fade" />
</body>
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
});
});
Demo

$(function(){
$(this).html('«');
$('.slider-arrow').click(function(){
var x = $(".slider-arrow").offset();
if (x.left == "308")
{
$( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
}
else
{
$( ".slider-arrow, .panel").animate({left: "+=300"}, 700);
}
});
});

Related

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

Affect property of any div when it is clicked

I want to affect the background-color of any item on my page when it is clicked. How can i do this without using id names? I've tried using this as you can see below but it doesn't seem to be working.
$(document).click(function() {
$(this).css({'background-color': 'blue'});
});
Any help always appreciated. Thanks
This should work:
$(document).click(function(event) {
$(event.target).css({'background-color': 'blue'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
Why not look at event.target?
document.addEventListener('click', function (e) {
e.target.style['background-color'] = 'blue';
});

Jquery on hover and out

I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle

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

slide out and mouse outside glitch jquery

This is the Fiddle.
The problem is that, when you click on the button to close the slide out box, there is a glitch. I don't know how to fix it.
If someone could help me out that would be great. thanks!
var mouse_is_inside = false;
$(document).ready(function(){
$('#box').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('#box').slideUp();
});
});
That's the code, if it helps anyone.
Use slideToggle instead:
$(".show").click(function(){
$("#box").slideToggle();
});
Fiddle: http://jsfiddle.net/9spzQ/10/

Categories

Resources