score:0
Accepted answer
You run 53 times your animate
function for only one $('.quick-contact')
I have add a variable active = 1
for check is animated.
Please try, it's work fine
$(document).ready(function() {
var active = 1;
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.quick-contact').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object && active ==1){
$(this).delay( 1000 ).animate({'opacity':'1'},500);
$(this).animate({'bottom':'0px'},500);
active = 0;
}
});
});
});
$(document).ready(function(c) {
$('.alert-close').on('click', function(c){
$('.quick-contact').fadeOut('fast', function(c){
$('.quick-contact').remove();
});
});
});
.wrapper
{
width:100%;
height:1500px;
position:relative;
}
.quick-contact
{
width:300px;
height:200px;
position:fixed;
bottom:200px;
right:0px;
padding:0px;
background:#f6f6f6;
color:#333333;
opacity:0;
z-index:99;
}
.alert-close
{
color:red;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="quick-contact">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<div class="alert-close"><div class="close-btn">Close me</div>
</div>
</div>
</div>
codepen : http://codepen.io/anon/pen/YwOedm
UPDATE
$(document).ready(function() {
$(window).scroll( function(){
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$(".quick-contact").delay( 1000 ).animate({'opacity':'1'},500);
$(".quick-contact").animate({'bottom':'0px'},500);
}
});
});
$(document).ready(function(c) {
$('.alert-close').on('click', function(c){
$('.quick-contact').fadeOut('fast', function(c){
$('.quick-contact').remove();
});
});
});
.wrapper
{
width:100%;
height:1500px;
position:relative;
}
.quick-contact
{
width:300px;
height:200px;
position:fixed;
bottom:200px;
right:0px;
padding:0px;
background:#f6f6f6;
color:#333333;
opacity:0;
z-index:99;
}
.alert-close
{
color:red;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="quick-contact">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<div class="alert-close"><div class="close-btn">Close me</div>
</div>
</div>
</div>
Related Query
- Stop all active ajax requests in jQuery
- Hide all but $(this) via :not in jQuery selector
- Ignore all hidden div but not one in jQuery validation
- remove all options from select jquery but only one
- jQuery stop(true, true) to jump to end of all animations in queue
- How can i stop all audio playing using Jquery
- jQuery selector - all but the first
- jQuery animate delay issues with self -queued looping of steps
- How to animate a set of jQuery objects one at a time (instead of all at once)
- Using JQuery removeClass() to remove all classes but one
- jquery animate but then come back to normal
- How to stop all previous animations in Jquery before executing new one?
- jQuery keypress event fires repeatedly when key is held - but not on all keys
- jQuery animate marginRight not working, but marginLeft works just fine
- Jquery not working at all but other Javascript code runs
- Removing all values but the first from a drop down list using jQuery
- jquery hide all image but not the first
- Delay and animate toggle jquery
- jQuery jPlayer - How to stop all players before playing a new one?
- AngularJS CORS don't send all cookies with credential, but jQuery send
- jquery removeClass for all but the first item?
- jQuery selector: all but n first in a row
- JQuery function doesn't work on Chrome on Mac, but works on Chrome on Win 7 and all other browsers
- JQuery - Select all but last list (from multiple lists.)
- jQuery animate working in fiddle but not smooth online
- jQuery "visible" doesn't work in all browsers, but in Firefox
- delay not reinitialised correctly in jquery animation queue
- How to remove all CSS property inside a class, but don't remove class using jQuery
- Automatically animate all hover states with jQuery
- how to preload more than one but not all images of a slideshow with jquery
- Apparently missing ) gets fixed in jQuery :not(.class on all but Safari?
- jQuery code to delete all spans with same content but keep one
- Remove all but the first N elements from a list using JQuery
- How to stop user from removing all tr in table based on jquery count of each ID?
- How to add class to all li but not to clicked li using jquery
- jQuery - Stop delay fadeOut by another event
- Jquery animate works in console, but not in script
- How to get all values from inputs with same name but different index via Jquery
- jQuery select all SVG paths and apply animate fill
- Stop delay on animation in JQuery
- Jquery fadeIn loop stop, but finish fading in before stop not working
- what happen to jquery animation queue promise when stop is called
- Stop jQuery Animation for all Child Elements
- JQuery - Find all descendants at any level, but not the descendants of those descendants
- How to stop a webpage from loading until all jQuery load functions are complete?
- jQuery animate is very choppy in all browsers - div with jpg moving up and fading in at the same time
- Wait until all jQuery Ajax requests are done?
- Official way to ask jQuery wait for all images to load before executing something
- Detect all changes to a <input type="text"> (immediately) using JQuery
- jquery input select all on focus
More Query from same tag
- Change JavaScript string encoding
- Bulk uploading markers from Excel with custom info boxes
- Dynamically change text
- jQuery Datepicker - Automatically define altField for all datepickers
- JQuery animation and z-index are not working correctly
- How can I update window.location.hash without jumping the document?
- function defined in one js file is undefined in another js file
- First item to insert into the mobile database isn't added
- Highcharts data series issue with ajax/json and PHP
- jQuery - plugin options default extend()
- Table2excel plugin does not work
- Change font size dynamically on specific paragraph <p> elements?
- Colorbox doesn't open at proper height when first opened
- jQuery-appended HTML elements do not pick up CSS styles with crate & clj-js
- Check/Uncheck all checkboxes
- Javascript - how to show DIV after putting text into <input>
- Document.Ready() is not working after PostBack
- `format` callback in newest version of jQuery UI selectmenu
- Passing arrays in ajax call using jQuery 1.4
- Bootstrap dropdown stops working after I switch pages - Rails 4.2
- jQuery Datepick plugin (Keith Wood) How to display only 2 month?
- Javascript: How do I expand a user selection based on html tags?
- Jquery; correctly selecting contents of a script tag
- How to make a dynamically changing download link with javascript?
- How to pass a variable in match function in javascript?
- jQuery Upload Progress and AJAX file upload
- Semantic-UI Multiple selection get values
- Force download through js or query
- How to skip browser default print preview and print content directly to printer in jquery/javascript?
- This Keyword + DOM Element in jQuery