I'm looking to have the fade animation happen plus have the height of .hideme also growing from 0px to 30px during the ().delay(2000).
Instead of .hideme appearing as display: block; on click, I want it's height to go from 0px to 30px for ().delay(2000) while also keeping the fade animation.
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
$("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}
.hideme {
background: blue;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
// $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
$("#post-draft1").show().animate({height: '30px',opacity: 1},1000).delay(2000).animate({height: '0px',opacity: 0},1000);
}
.hideme {
background: blue;
height: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
To animate the height you could use the .animate() jQuery method.
$('.hideme').animate({height:'30px'});
But first, you have to set the height to a minor value:
.hideme {
background: blue;
height: 0px;
}
Instead of .delay() you could use the callback of fadeIn to animate the height of .hideme when fadeIn completes:
$("#post-draft1").fadeIn("slow", function(){
$('.hideme').animate({height:'30px'});
});
See: http://api.jquery.com/animate/
Related
I'm not certain of the reason, but this particular function does not seem to be working in both the Safari/iOS and Chrome browsers:
$(window).on('load',function(){
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
I've currently inserted the script before the </head> tag. Could anyone explain why this is occurring?
UPDATE:
$(window).on('load', function() {
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
.preloader-wrap {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
text-align: center;
line-height: 0;
}
#preloader {
margin: 40px 0;
padding: 0;
border: 0;
width: 45px;
height: 45px;
}
#preload {
display: none;
}
img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/4m2ikeh/q2Poxnx2k/jquery-3.2.1.min.js"></script>
<div class="preloader-wrap">
<img src="https://cdn.ndtv.com/vp/static/images/preloader.gif" id="preloader" />
</div>
<div id="preload">
<img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco10_r1_1280.jpg">
</div>
Why do you use hide() when you use fadeOut() and show() when you use fadeIn(). However have a look at here:
$(document).ready(function() {
$("#preloader").fadeOut(800, function() {
$("#preload").fadeIn(800)
});
});
#preload {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
Preloader Content
</div>
<div id="preload">
Preload Content
</div>
It is working for me in Firefox, Chrome, Safari
Maybe those multiple concurring ways to show and hide the elements are in cause. I don't have any IOS device to be sure.
If you wish a delay and the fades one after the other, try this way:
$(window).on('load',function(){
setTimeout(function(){
$('#preloader').fadeOut(800, function(){
$('#preload').fadeIn(800); // FadeIn after fadeOut complete.
});
},800); // delay from the load event and the fadeOut.
});
I was playing around with learning some JavaScript and this small code didn't work for me. If I take out the setTimeout function, the hover works again.
Why doesn't the hover work?
https://jsfiddle.net/jzhang172/1n8gqeom/
setTimeout(
function(){
$(".div").css("background","blue");}, 100);
.div{
background:black;
height:50px;
width:50px;
}
.div:hover{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
$(".div").css("background","blue");}, 100);
With this line of code, you are adding inline style to the .div, so it has higher specificity.
Try something like this:
setTimeout(
function() {
$(".div").addClass('someClass');
}, 100);
.div {
background: black;
height: 50px;
width: 50px;
}
.div:hover {
background: red;
}
.someClass {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
css priority。 inline style > class style, so, cover
.div:hover{
background:red !important;
}
I am writing a plugin for showing ajax content.It is wrapped in a ajax-content-wrap.I have applied jquery animate() but not smooth with auto height.And fade() function is also animating.But when i use a specific height animate() works and fadeIn() does not works.
my html codes are below
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
My jquery
$('.ajax-content-show').animate({height:'200px'}, function(){
$(this).fadeIn('slow', function(){
$(this).fadeIn('slow').load(url);
})
});
My css
.ajax-content-show{
padding: 20px 20px;
display: block;
border: 1px solid #eee;
margin: 10px 0;
}
If I understand what you are trying to acheive here is a solution:
$('.ajax-content-show').animate({
height: '200'
}, 500, "linear",
function () {
$('.ajax-content-show').hide(0, function () {
$('.ajax-content-show').load(url, function () {
$('.ajax-content-show').fadeIn('slow')
});
});
});
If not, can you explain (in steps) what you require, first make "div" 200px then fade in "loaded page" or do them both simultaneously?
Note: Don't need to include the 'px' when setting the height property, JQuery assumes pixels as a default.
May this you want ?
See snippet.
$(".ajax-content-show").load("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
$(this).slideDown(10000); // change the time, or just remove it if you think too slow.
$(this).addClass("loaded");
});
.ajax-content-show{
padding: 20px 20px;
display: none;
border: 1px solid #eee;
margin: 10px 0;
height: auto;
opacity: 0;
transition: opacity 5s ease;
max-height: 500px; /* This just for show that sliding is working */
}
.ajax-content-show.loaded {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it
I have a <div> which expands when clicking on it and again click to it back in normal size which is fine BUT I am wanting to have Something like ...
When click on the <div> (class name .topHead) it should expand and return to normal size if the cursor is moved from the <div> without the need to click to bring it back to the normal size
Is this possible? Any solution will be appreciated.
js Fiddle : http://jsfiddle.net/saifrahu28/u6YWZ/
HTML
<div class="topHead" ></div>
CSS
.topHead {
height: 60px;
width: 100%;
background: #ccc;
overflow: hidden;
border-bottom: 6px solid #fa9a37;
z-index: 999;
transition: all 1.1s ease;
cursor:pointer;
}
.topHead.active {
height: 100px;
z-index: 999;
background: blue;
border-bottom: 6px solid #fa9a37;
transition: all 0.7s ease;
box-shadow: 0 4px 2px -2px gray;
cursor:default;
}
JS
$(".topHead").click(function() {
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
});
try this
$(".topHead").click(function() {
$(this).toggleClass("active");
}).mouseout(function(){
!$(this).hasClass("active")||($(this).toggleClass("active")/*,...*/);
});
http://jsfiddle.net/u6YWZ/2/
$(".topHead").on("mouseout",function() { // you may use mouseleave as well instead of mouseout
$(this).removeClass("active");
$(".TopsliderArrow").hide(); // Not Sure what this does but I guess you may hide this
});
Add this to your js
I'd be worried about getting the active class and TopsliderArrow visibility out of sync using toggle(). This method doesn't use toggle so may better suit your needs.
$(".topHead")
.on("click",function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
} else {
$(this).addClass("active");
$(".TopsliderArrow").show();
}
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Demo Fiddle
UPDATE:
Turns out toggle() works just fine:
$(".topHead")
.on("click",function(){
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Working Demo Fiddle