Issue with JQuery UI show and slide animations not functioning properly

After dedicating countless hours to this project, I have discovered that the issue arises when elements inside the current element are floated or absolutely positioned. This seems to disrupt the sliding effect.

If you are experiencing a similar problem, I wish you the best of luck in finding a solution.

Here is the original post:

It's quite simple really. I have multiple divs with various elements, and only one of these divs is visible at a time (the others remain hidden).

When the user clicks "Next", the current div should slide to the left and hide, while the next div slides in from the right (the actual logic is not the issue).

Using .slideUp() and .slideDown() achieved the desired result beautifully. However, when attempting to use:

$(oldBox).hide("slide", { direction: "right" }, 1000);

it does not work as expected. JQuery UI is already linked, so that is not the problem.

Any assistance would be greatly appreciated.

EDIT: Link to JSFiddle: http://jsfiddle.net/NFyRW/

EDIT2: It works on JSFiddle; however, I am unable to replicate the success on my actual website. The JavaScript is stored in a separate file and loaded in the header of each page (same header for every page).

jqueryhtmlcssjquery-ui

Answer №1

To add animation to your absolutely positioned slides, utilize the left property. However, if they are relatively positioned, replace left with margin-left.

Given this sample HTML structure:

<div id="mainContainer">
   <div class="slide"></div>
   <div class="slide"></div>
</div>

#mainContainer {}
.slide {position:absolute;top:0;left:0;}

You can achieve the following effects:

  • Fade out the current slide
  • Move out the current slide to the left
  • Fade in the new slide
  • Bring in the new slide from the right

.

var $oldBox=$('#oldBox');
    $oldBox.animate({
       'left':-$oldBox.outerWidth(true),
       'opacity':0
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});

    $newBox.animate({
        'left':0,
        'opacity':1
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});

Answer №2

Make sure to include both the jquery and jquery ui js and css files for proper functionality.

There is no requirement for any custom js files. Instead, utilize the following code:

$(this).effect( "slide", "right" ); or $(this).effect('slide', { direction: 'down'}, 500);

Answer №3

Dear General Twyckenham, I encountered a similar issue to yours.

To resolve the problem, I included a call to the custom-min.js file. Give it a try.

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>


$(document).ready(function() {
  $("#hide").click(function(){
     $(".target").hide( "slide", 
     { direction: "left"  }, 2000 );
  });
  $("#show").click(function(){
     $(".target").show( "slide", 
     {direction: "right" }, 2000 );
  });

});

This solution worked for me. Surprisingly, no one else mentioned using this custom file.

Best regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The angular-block-ui feature fails to run my HTML code as a personalized message

I'm looking to enhance my UI by implementing a blocking feature with a spinner display. My attempt involved the following code: blockUI.start("<div class='dots-loader'>Minions are Working!</div>"); // code for fetching data ...

javascripthtmlcssangularjs

Using jQuery to obtain the object context while inside a callback function

Suppose I have the following object defined: var myObj = function(){ this.hello = "Hello,"; } myObj.prototype.sayHello = function(){ var persons = {"Jim", "Joe", "Doe","John"}; $.each(persons, function(i, person){ console.log(this.h ...

javascriptjquery

The Perfect Method for Storing Array Data in MySQL Through an Ajax POST Request

Received an array via Ajax POST: Array ( [name_dependents] => Array ( [0] => asd [1] => hfg ) [age_dependents] => Array ( [0] => 6 [1] => 6 ) [dob_dependents] => Array ( ...

phpjquerymysqlajaxforeach

Steps for adding a thought bubble over an image using CSS

Currently, I am working on a project where users can upload an image and based on that image, a thought bubble or speech bubble is placed on top. I need to make sure the placement is just right, but my main priority is getting a functional version up and ...

javascriptjqueryhtmlcss

Adding colors dynamically upon page reload with javascript and jQuery

I have created an array of colors and am attempting to use colors.forEach inside the ready function to call addBox for each color in the array. My goal is to ensure that all the colors are added when the page is reloaded. Please let me know if you require ...

javascriptjquery

Guide: Aligning Content to the Left within a Centered Container

Issue I am facing a challenge in aligning blocks to the left within a centered wrapper that has a dynamic width. Despite trying only HTML and CSS, I have been unsuccessful in achieving this. To see an example of what I am dealing with, you can view this ...

htmlcsswebcentering

What is the best method for including an HTML class within a JavaScript for loop?

Looking for a solution to add a class while iterating through an array? Check out the code snippet below: var users = [{ name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { ...

javascripthtmlcss

Obtaining URLs from a dataset in R while handling empty values

Looking to retrieve the source and demo URLs for a collection of Jekyll themes and organize them into a data frame. library(rvest) info <- read_html("https://github.com/jekyll/jekyll/wiki/themes") data <- info %>% html_nodes(" #wiki-body li") ...

htmlrlistrvestpurrr

Eliminate Element Node Issue

I'm trying to remove a newly generated element using this code, but it doesn't seem to be working. I checked in firebug and there are no JS errors appearing. $('.popular-list li a').on("click",function() { var stuff = $(this).text( ...

jquery

Sending data from form inputs to an array using the GET method

I'm trying to pass an array from form inputs (checkboxes) using the get method. In my AJAX call, I have the following code: var subcat_checked = new Array(); $.each($("input[name='subcategories']:checked"), function() { subcat_checked.p ...

jqueryajaxforms

The JavaScript operator that functions in a manner akin to the SQL "like"

I am working on a jQuery function that needs to perform like the "like" operator. Can anyone help me achieve this? Your assistance is greatly appreciated. The function currently only works if I search for the whole word, for example: var vsearch = "home" ...

javascriptjqueryunderscore.js

Tips for concealing the URL in the address bar while using `<a href>` links

I have a variety of documents saved in a folder within an ASP MVC 5 project. Instead of directly linking to the document with an HTML tag, I am utilizing the following ng-href: <a ng-href="~/download/document/{{vm.document}}"></a> By using th ...

javascriptjqueryasp.netangularjsasp.net-mvc

PHP script to populate a table with images based on certain conditions

I have a table in HTML that displays results from a SQL database on the right hand side. The code snippet for populating each cell is as shown below: <tr> <td>House</td> <td><?php echo $row_buyerdetails['tod_hous ...

phphtmlsql

Animate the text before it fades away

Could someone help me figure out how to make my text animations work correctly? I want to show and hide specific text with animation when buttons are pressed, but I'm having trouble implementing the hiding animation. Any guidance would be appreciated. ...

javascripthtmlcss

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

Leveraging jQuery's $.getJSON method to fetch localization data from aprs.fi

Utilizing JSON to retrieve localization coordinates from is my current goal. I came across an example on http://api.jquery.com/jQuery.getJSON: <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { tags: ...

javascriptjqueryjsonlocalizationgetjson

What causes my variable to show None instead of the current stock price?

I attempted to extract the stock price data from using BeautifulSoup. However, my program is not displaying the stock price and instead showing "None". How can I correctly retrieve the stock price information? My provided code snippet: from bs4 import Bea ...

pythonhtmlbeautifulsoup

Eliminate the initial padding in an everlasting horizontal CSS animation

Is there a way to start an infinite horizontal animation inside the screen instead of outside and then bring it in? I have successfully implemented the animation, but it currently starts off-screen. .marquee { margin: 0 auto; white-space: nowrap ...

htmlcss

Having trouble getting PHP Ajax File Upload to function properly?

I am using Bootstrap and have a Form in a Modalbox. There is a Fileupload field, and I want to upload images. However, when I click the Submit button, the site seems to reload instantly and there is no file uploading... Below is my Ajax Script: <scri ...

phpjqueryajax

Transmitting an HTML video object (canvas) to Flask through Ajax communication

I've been struggling to retrieve a user image from the camera using Flask. However, I keep getting a base64 encoded image that is not decodable. I've tried various codes from different platforms but haven't been able to achieve the desired r ...

javascripthtmlajaxflaskhtml5-video