jquery转移效果持有css结束

Question

So I am making an app that utilizes the effect("transfer") from the query ui. Everything is working. But at the end of the animation the css tag that belongs to the effect .ui-effects-transfer just vanishes. I'd like it to stay on the page.

Is this possible?

here is my code javascript code.

  <script>
@foreach  ($stimuli['comparison'] as $stimulus)
    @if($stimuli['sample'][0] == $stimulus)

$("#sample").effect("transfer", {to: $("#{{ $stimulus }}")}, 9000);

        @endif
@endforeach


</script>

EDIT

So my instinct would be to make a second div for the css. and basically postiion it manually at the end of the animation. But I was wondering if there was a better and easier way? Because I want to keep element the same size as how the transfer is handling that css content image.

CSS

    .ui-effects-transfer {

    background-image :url("http://images.clipartpanda.com/finger-clipart-pointing-finger-md.png");
    opacity: .8;
    margin-top: 125px;
    z-index: 5 !important; 
  }

Issue http://jsfiddle.net/qq8q7357/3/

That is the issue I am.

During animation the picture is above everything. I want it to end by leaving the picture exactly where it is on top of the div rather then having set as a background image.

Answer 1

Use the functions complete method to add the class back to the element after the animation is complete. Here is the documentation

Jquery UI

 $("#sample").effect("transfer", {to: $("#{{ $stimulus }}")}, 9000,function(){
       $('#{{ $stimulus }}').addClass('ui-effects-transfer');
 });

EDIT:

.ui-effects-transfer {
   background-image :url("http://images.clipartpanda.com/finger-clipart-pointing-finger-md.png") no-repeat;
   opacity: .8;
   z-index: 5 !important;
   background-size:20px 20px; //hand size
   // Use background postion not margin to move the image;
   background-position: 0px 125px;
}