What is the xui equivalent of jquery's slideUp/slideDown function?

Hello, I am experimenting with creating a similar effect to jQuery's slideUp and slideDown function using [xui](http://xuijs.com).

So far, I have successfully implemented the fade effect:

xui.extend({
           fadeOut:function(dur, callback) {       
           this.tween({opacity:'0',duration:dur}, callback);
       },

           fadeIn:function(dur, callback) {       
           this.tween({opacity:'1',duration:dur}, callback);
       }
});

This has been a successful endeavor! However, I am now attempting to master the slideUp/Down effect but have faced some challenges.

   slideUp:function(dur, callback) {       
       this.tween({height:'0',duration:dur}, callback);
   }

Although this method works on elements without padding and border, I am seeking assistance in solving this issue. Any advice or guidance would be greatly appreciated :)

Answer №1

Have you considered applying a fadeOut effect to the padding and border, or perhaps setting them to auto or none?

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

Master the art of returning two functions within a single function in Javascript with NodeJS and ExpressJS

Currently, I am facing an issue where I need to combine two objects and return them in one function. The challenge lies in the fact that both objects have almost identical properties, but different values. To tackle this problem, I created two separate fu ...

Choose a drop-down menu with a div element to be clicked on using Puppeteer

Issue Description: Currently encountering a problem with a dropdown created using material select. The dropdown is populated through an API, and when selected, ul > li's are also populated in the DOM. Approaches Tried: An attempt was made to res ...

The functionality of Jquery and JS lies in working on DOM elements as opposed to

Just to start off, I want to mention that my knowledge of JavaScript and specifically jQuery is quite limited. I've encountered an issue with some JavaScript and jQuery loading on my webpage. 1) I have written some code on JSFiddle http://jsfiddle.n ...

Is it possible in RxJS to configure a ReplaySubject (or equivalent) that replays the latest messages with a distinctive identifier?

Is it possible to create a generic code that behaves like a ReplaySubject but emits each most recent message with a unique name upon subscribing? In the script below, the current output is... I want this to be logged once ... received the latest bbb 5 I c ...

Error: Jasmine is unable to find the module that is being referenced

When running SpecRunner.html, an error is encountered ReferenceError: module is not defined The Controller code is as follows: angular.module('mymodule', []) .controller('mycontroller', ['$scope', function($scope) ...

Why isn't this basic CSS animation executing properly?

I have encountered an issue and I have created a JSFiddle to demonstrate it. http://jsfiddle.net/sqMT6/1/ Basically, when you click on a paragraph, the 'hidden' class is supposed to be set, triggering a webkit animation that makes the paragraph ...

Calculate the number of checked checkboxes using JQuery

Can someone help me figure out how to get the count of checked checkboxes from the code sample below? Thanks, Digambar K. ...

What is the method to display just the final 3 characters within a paragraph?

Is there a way to display only the last three characters of a string using either a method or a string method? I consistently have a 13-digit number, but I specifically require showing only the final three digits. Appreciate any assistance provided. Than ...

Guide to setting up an object array in JavaScript with unique child elements and no duplicate values

I have an array that looks like this: sampleArray = ["x", "y", "z". "a.b", "a.b.c", "a.b.d", "a.e.f", "a.e.g"] However, I am aiming to transform it into the following structure, or something similar to it: newArray: [ { "x": [] }, ...

Post request in ExpressJS fails to redirect user after submission

My current project involves developing a web application using NodeJS and ExpressJS. One issue I am encountering is with the login functionality on my website. After filling out the login form, the user's credentials are sent via a post request to the ...

Conquering Challenges Across Multiple Disciplines

Is there a solution to solving the cross domain issues that arise when trying to fetch data from a different web server on the client-side, in violation of the Same Origin policy? ...

jQuery Mobile - Struggling to hide a button with traditional jQuery techniques

Looking for help hiding a simple button? <input type="button" id="logoutBtn" value="logout" data-theme="d" data-inline="true" aria-disabled="false"> Attempted to hide it with this code but it didn't work: $('#logoutBtn').hid ...

Is employing absolute paths in our confidential Node dependencies a good idea?

I have recently organized our codebase's React components into a separate dependency to make them reusable across different projects. To improve readability, all components now utilize Webpack aliases: import TestComponent from 'components/TestCo ...

Troubleshooting problems with dropdown binding in Knockout ObservableArray

I am encountering an issue with fetching data from a restful wcf service during page load and binding it to a dropdown, which is not functioning as expected. function CreateItem(name, value) { var self = this; self.itemNam ...

Directive Template with Dynamic Fields (AngularJS)

I am interested in creating a custom directive that can bind to any object, allowing me to specify the field used in the template for display. Previously, I was limited to using {{item.Name}}, but now I want the flexibility to define the display field. Cu ...

The deviceorientation event in JavaScript is not triggering on Chrome for Android

I am attempting to activate the deviceorientation event in JavaScript, but it's not firing on my Android device. If you'd like to review the event documentation, please click here and view this image: https://i.sstatic.net/HkcOQ.png window.addE ...

Controller receiving incomprehensible response from service

Here is my service code: 'use strict'; app .service('myService', function($http) { this.getJSON = function() { return $http.get('someUrl/dataForm').then(function(data){ return dat ...

the redirection fails to initiate following the button press

I've encountered an issue similar to one discussed on stackoverflow, but I haven't been able to resolve it. I'm currently on the locking page and when a user clicks on a button, they should be redirected to the select-portfolio page. Howev ...

Tips for replacing the values obtained during parsing an XML document

I am working with an XML file that contains category and product information. Here is a snippet of the XML data: <categories> <category id="2" name="Pepsi" > <products> <product id="858" name="7UP" price="24.4900" /> ...

Manipulate the url bar using ajax and window.location

When making an AJAX request using .load, everything works perfectly. However, there is an issue with the URL bar. I am trying to change the URL displayed in the bar. For instance, when the ajax loads the about/contact page, I want the URL bar to show about ...