Why delay method doesn't work in my jquery code?

Question

0.00/5 (No votes)

See more:

hi have a source circular menu,the source pure is here:
that when i pushed th button menus start to rotating.

JavaScript

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>stackprogramer</title>
<style>
html,
body { height: 100%; }

body {
  margin: 0;
  background-image:url("back.jpg");
  overflow: hidden;
}

.selector {
  position: absolute;
  left:45%;
  top: 40%;
  width: 280px;
  height: 280px;
  margin-top: -70px;
  margin-left: -70px;
}

.selector,
.selector button {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #428bca;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}

.selector button:hover { background: #3071a9; }

.selector button:focus { outline: none; }

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all .8s ease-in-out;
}

.selector li input { display: none; }

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all .8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label:hover { background: #f0f0f0; }

.selector li input:checked + label {
  background: #5cb85c;
  color: white;
}

.selector li input:checked + label:hover { background: #449d44; }

.selector.open li input + label {
  width: 130px;
  height: 130px;
  line-height: 80px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}
</style>
</head>

<body  >
<h4 align="center">stackprogramer</h4>
<div class='selector'>
  <ul>
    <li>
      <input id='c1' type='checkbox'>
      <label for='c1'>Menu 1</label>
    </li>
	<li>
      <input id='c1' type='checkbox'>
      <label for='c1'><iframe src="http://www.codeproject.com/members/flair/12352100" 
                height="100" width="120" scrolling="no" frameborder="no"></iframe></label>
    </li>
    <li>
      <input id='c2' type='checkbox'>
      <label for='c2'>Menu 2</label>
    </li>
    <li>
      <input id='c3' type='checkbox'>
      <label for='c3'>Menu 3</label>
    </li>
    <li>
      <input id='c4' type='checkbox'>
      <label for='c4'>Menu 4</label>
    </li>
    <li>
      <input id='c5' type='checkbox'>
      <label for='c5'>Menu 5</label>
    </li>
    <li>
      <input id='c6' type='checkbox'>
      <label for='c6'>Menu 6</label>
    </li>
    <li>
      <input id='c7' type='checkbox'>
      <label for='c7'>Menu 7</label>
    </li>
    <li>
      <input id='c8' type='checkbox'>
      <label for='c8'>Menu 8</label>
    </li>
  </ul>
  <button>Click to toggle the menus</button>
</div>
<script src="jquery-2.2.1.min.js"></script>
<script>
var nbOptions =8;
var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
<!--                .css({ transform: 'rotate('+now+'deg)' })
 -->               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
				  
				  
        }, 
		
		duration: 500

    });
}
		setTimeout(function() { rotate(li,d); }, 10000);//@ sourceURL=pen.js

// show / hide the options
function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
	
    var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;

    for(var i=0; i<li.length; i++) {
        var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
        $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);

    }
}


$('.selector button').click(function(e) {
    toggleOptions($(this).parent());  
});
		setTimeout(function() { toggleOptions('.selector'); },100);//@ sourceURL=pen.js


</script>


</body>
</html>

why when i add method delay jquery,it has not any effect.
can any help me,thanks

What I have tried:

i added function delay but didn't work?for delay in rotating menus!!

/ show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');

var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;

for(var i=0; i<li.length;> var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).delay(3000).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);

}
}

Posted 3-Mar-16 3:00am

stackprogramer

Updated 4-Mar-16 19:09pm

v3

Add a Solution

Comments

[no name] 3-Mar-16 9:54am

setTimeout() will execute once so if you want to execute multiple times then use setInterval()

stackprogramer 3-Mar-16 10:04am

i want to create dealy with method delay.please see http://stackprogramer.github.io/
i want to the rotation menu is taken 20 second ike a merry-go-round

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

stackprogramer · Accepted Answer · 2016-03-04T19:09:00

after some searching and thinking i concluded that .dealy work for animation ,so i should use setTimeout method here.yes it works.
in doc jquery talked for queue we usually use delay method.

C#

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

for more info please see
api jquery

Manas_Kumar thanks for guiding.

thanks for attention
cordial yours stackprogramer