The concept involves a grey box sliding left from behind a green box after the page is fully loaded, with a slight bouncing effect if possible.
Update: I created a new version inspired by modifications made by others on the jsfiddle and feedback from Nicola http://jsfiddle.net/RBD3K/
In this new version, the grey box should be positioned behind the green box and slide from right to left for a more dynamic appearance
If you want to make it bounce, there are a couple of things you might be missing:
1) Make sure you have loaded jquery UI.
2) Make sure the bounce effect is placed after the animate effect in your code:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
Check out the updated fiddle here: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Give this a try! It might not be exactly what you're looking for.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: In your updated fiddle, make sure to add position :absolute;z-index:1000 as CSS for .right
When attempting to post user details to an API using the access token obtained during sign up, I encountered the following error message: Unexpected end of JSON input. Here is my code: postNameToApi() { console.log("inside post ap ...
By using the MutationObserver.observe() method, I am able to monitor changes in a specific attribute. For instance, if I have a Div element and the attribute value is modified, then the designated callback function will be executed. However, if the propert ...
My current challenge involves enhancing the information sent in a JSON request from my application to DialogFlow. While I am familiar with triggering events to send data calling an intent through the method described in Sending Parameters in a Query Reques ...
I've encountered a bug while working on my website with the materializecss framework. Sometimes, inputs are not responding correctly. This issue seems to occur when clicking on the first input and accidentally targeting the higher part of the second ...
Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...
I'm in the process of creating a bar chart by fetching options from an ajax response. However, I encountered an error when passing the object to the highcharts constructor. Uncaught TypeError: x[(intermediate value)(intermediate value)(intermediate v ...
Similar Question: Best method for identifying duplicate values in a JavaScript array If I have an extensive array containing thousands of elements, I am looking to check if there are 2 or more elements with identical values and return true. I unders ...
My HTML page uses JQuery and Select2 to create several <option>s, which works smoothly. However, there is a brief moment (around 0.5-1 second) where it displays mySelectBox and mySelectBox2 separately before reformatting them to width=100%. This ini ...
I'm encountering an issue where I cannot pass arguments to a C# method from JS in Blazor. Here is the code snippet causing the problem: <button class="m-2 btn btn-secondary" @onclick="FindMultiplication">Show Sum</button& ...
Is there a way to update the value of "message" for "chatTemplateId":"5" and "mid":"b" to "Test2" in the JSON data below using node-js/javascript? In C# I would have used LINQ, but I'm not sure how to achieve this in an optimized manner in JavaScript/ ...
button, a { height: 30px; display: inline-block; border: 1px solid black; vertical-align: middle; } button > div, a > div { width: 30px; height: 10px; background-color: red; } <button> <div class="buttonDiv"></div> ...
Currently, I am extracting an XML string from a hidden field and the task at hand is to append a new node to this XML. The first step involves converting the XML string into an XML object. However, since I am limited to using jQuery version 1.3, the pars ...
When setting up a database schema, sometimes an error occurs in the console indicating that something was not written correctly. How can this be resolved? Here is the code: let mongoose = require(`mongoose`); let Schema = mongoose.Schema; let newOrder = ...
I have created JQuery scripts to toggle the display of future sentences on my page (approximately 1000 duplicates) and I am seeking the most efficient method (for browser/host) to accomplish this task. Here are two functional solutions that I have already ...
When using Google Maps on my project through an https connection, I encountered a problem. Interestingly, the issue only arises in certain browsers while others work fine. Despite searching for a solution extensively, I have not been able to find one. Some ...
Fetching data through a function. Establishing a connection and retrieving necessary information. Some code has been omitted for brevity. function executeSQL(sql, bindParams , options) { return new Promise(function(resolve, reject) { ... resolv ...
My goal is to populate a JSON object with objects that look like this: var books = [{ "no" : 1, "bookType":"fiction", "bookPrice": 60 },{ "no" : 2, "bookType":"f ...
Why is Chrome successful at executing this code: .amsearch-input::-webkit-input-placeholder { color: red; } <input class="amsearch-input" placeholder="It works!" /> ...while it doesn't work in other browsers: .amsearch-input::-we ...
Could this be a compatibility issue with Firefox? The layout appears fine in Chrome or when I take out columns: 2, then it also displays correctly in Firefox. div { width: 500px; padding: 2rem; display: inline-flex; align-items: baseline; bor ...
I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...