logo
down
shadow

Accordion close animation not working. It opens (with animation) and closes (with no animation)


Accordion close animation not working. It opens (with animation) and closes (with no animation)

By : user7455528
Date : November 22 2020, 03:01 PM
will be helpful for those in need Because before the setInterval got a chance to execute document.getElementById("id-DetailsPanel").style = "display:none"; happened. A simple fix would be to move display:none line after clearInterval(int);
code :
function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details ▲";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details ▼";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  // document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
      document.getElementById("id-DetailsPanel").style = "display:none";
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}
.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>


Share : facebook icon twitter icon
Android alpha animation: Staying in last animation frame when animation is completed

Android alpha animation: Staying in last animation frame when animation is completed


By : user2465343
Date : March 29 2020, 07:55 AM
This might help you Add an Animation.AnimationListener to the Animation via setAnimationListener(). In onAnimationEnd() of the listener, call setVisibility(View.INVISIBLE) on the ImageView.
Why is jQuery UI accordion open/close animation so choppy?

Why is jQuery UI accordion open/close animation so choppy?


By : Bksltn Ks
Date : March 29 2020, 07:55 AM
To fix this issue I've been trying to figure this one out and I just can't see any issues - as well, the same accordion (same jqueryui version 1.9.2) works with no issues on another site, I even switched the theme to use the same one as the other site and I still get the choppiness on this one.
code :
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
}
jQuery: don't repeat animation when mouse is still / don't safe animation queue / stop animation

jQuery: don't repeat animation when mouse is still / don't safe animation queue / stop animation


By : Kevin Chen
Date : March 29 2020, 07:55 AM
will be helpful for those in need You should use jquery's stop to stop the previous animation before starting a new one:
http://jsfiddle.net/meNK5/1/
code :
$( this ).find('.info').stop(true,true).fadeIn(200);
Drawer Animation Error :'Animation<FractionalOffset>' can't be assigned to the parameter type 'Animation<Offset

Drawer Animation Error :'Animation<FractionalOffset>' can't be assigned to the parameter type 'Animation<Offset


By : Tarique Alam
Date : March 29 2020, 07:55 AM
To fix the issue you can do The issue is that you're using a FractionalOffset while the animation expects an Offset.
I think what you're looking for is this:
code :
return new SlideTransition(
  child: new Container(
    decoration: new BoxDecoration(
      boxShadow: [
        new BoxShadow(
          color: Colors.black26,
          blurRadius: 25.0,
        )
      ]
    ),
    child: child,
  ),
  position: new Tween(
    begin: const Offset(1.0, 0.0),
    end: const Offset(0.0, 0.0),
  )
  .animate(
    new CurvedAnimation(
      parent: animation,
      curve: Curves.fastOutSlowIn,
    )
  ),
);
Can I make the animation-timing-function affect the whole animation rather than each step of the animation?

Can I make the animation-timing-function affect the whole animation rather than each step of the animation?


By : Miklos Marinov
Date : March 29 2020, 07:55 AM
I wish this helpful for you An idea is to split the animation and instead of translation you can use top/left then you can easily control each one alone:
code :
.box {
  width:60px;
  height:60px;
  background:red;
  position:relative;
  animation: bounce 2s infinite linear alternate,
              move 2s infinite ease-in  alternate;
}

@keyframes bounce{
    0%{
        transform:rotateZ(0deg);
    }
    50%{
        transform: rotateZ(30deg);
    }
    100%{
        transform:rotateZ(0deg);
    }
}
@keyframes move{
    0%{
        top:0px;
        left:0px;
    }
    50%{
        top:125px;
        left:30px;
    }
    100%{
        top:250px;
        left:60px;
    }
}
<div class="box">

</div>
Related Posts Related Posts :
  • How to get text from selected value in a dropdownlist which is js based
  • window is not defined angular universal third library
  • Angularjs ng-repeat stylization depending on previous value
  • Trying to implement Fittext.js
  • Calculate number of match in array Lodash
  • Jquery Smooth Scroll Using Offset.top
  • How to extract data to React state from CSV file using Papa Parse?
  • How to add unique links to google maps markers
  • How to use if condition in a tool bar in java script
  • Ajax filter in django not showing in HTML
  • data collection with Javascript
  • Rotate image on lightbox2 load
  • Prevent body from scrolling when a Pop-Up is open
  • How to copy files that do not need to be compiled in Gulp?
  • Array not assigned to variable? How does this work and what exactly is it doing?
  • Sorting associative array of objects in javascript
  • Changing Icon in Sap.m.tree having CustomTreeItem
  • Merge two array of objects based on a key
  • javascript in css not working
  • Passing only clicked element to onClick function - reactjs
  • React boilerplate doesn't load js files in the index.html
  • is Child service inside child component visible in the Parent component?
  • Check if data attribute value equals a string
  • How to get value of child tag of a button tag
  • How to access subjects of selected mails in Apple Mail using JavaScript?
  • How to get all dynamically set inline-style CSS in jQuery?
  • Error: Module "html" does not provide a view engine (Express)
  • Random Image in <Div> from array
  • Slider with touch function
  • ReactJS Component Architecture Problems / Nested Components or Single Component Manager
  • Javascript: Caching within Closure doesn't work
  • HTM5 Canvas Drawing App: How Do I Select The Color?
  • Assigning Events using HTML DOM
  • html5 getUserMedia() portrait mode
  • How to avoid 'headers already sent' within Promise chain?
  • Get a result from a react native app integrated into an existing android app
  • Why does the value of input field return undefined
  • How to get return object in jquery uploadFile method
  • Javascript string with arguments to single quotes
  • Understanding JS functions syntax (applies to other languages as well, I'm sure)
  • AngularJS Single Page App: Reference Error, ____ is not defined
  • whatwg-fetch new typescript 2.5.3
  • React.js - Array.unshift() not updating array on front-end
  • JavaScript localeCompare don't sort well [ "aaa-1.0", "aaa-1.1", "aaa-1.01", "aaa-11&
  • Mongoose handle validation error in a promise call and Express middleware
  • Building tree array of objects from flat array of objects
  • How to add a progress bar to file upload using javascript and ajax call?
  • JavaScript: is it permitted to override a standard built-in object?
  • Change the current page of an AJAX datatables
  • Array element is undefined even after pushing elements into it
  • onmousemove event not working
  • Chrome-Extension/JavaScript How to make all links on page have no effect?
  • Websocket issue Internet Explorer
  • sessionStorage value becomes null in other tab in AngularJS
  • Split URL from position x to the end in Javascript
  • How to set value of input field with NgIf in Angular 4
  • invalidStateError for second time screenshare on Chrome
  • How do you pass a value to the variable in a xhr.setRequestHeader?
  • I cant start nodemon on my windows 10
  • Nested if else jumps out from the main if else in javascript
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org