jQueryを使って画像が長方形領域内を動き回るJavascriptのプログラムを含んだhtmlファイルを作りたいのですが2

https://teratail.com/questions/10984で分かりやすい解答を頂いて、プログラムを直したのですが、if文のところがうまくいきません。if文のところをコメントアウトすれば、枠ははみ出ますが、スタートストップは機能しています。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>jQueryを使ったプログラム</title>
6<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
7</head>
8<body>
9<script>
10$(document).ready(function() {
11  var img = $('#img').attr('src',
12                            'http://www.ics.ritsumei.ac.jp/wp-content/themes/ics/images/img_research01.gif').height(128).css({'left': 0, 'top': 0, 'position': 'absolute', cursor: 'pointer'});
13
14  var div = $('#rect').css({border: 'dotted 1px', position: 'relative'})
15  .width(480).height(360);
16  var width = div.width();
17  var height = div.height();
18  var x = 0, y = 0, divx = 1, divy = 1, velx = 4, vely = 4;
19
20  var timerId;
21
22  function loop(){
23
24  $('#img').css({left: x + 'px', top: y + 'px'});
25
26  x = x + velx * divx;
27  if((x + ('#img').width() > width) || (x < 0)){
28   divx = - divx;
29   x = x + velx * divx;
30   }
31  y = y + vely * divy;
32  if((y + ('#img').height() > height) || (y < 0)){
33   divy = - divy;
34   y = y + vely * divy;
35   }
36
37  timerId = setTimeout(loop, 100);
38
39 }
40
41  $('#start-btn').on('click', function() {
42
43  loop();
44  
45  });
46  $('#stop-btn').on('click', function() {
47
48  clearTimeout(timerId);
49  
50  });
51});
52
53
54</script>
55<div id="rect">
56 <img id="img">
57</div>
58<button id="start-btn">スタート</button>
59<button id="stop-btn">ストップ</button>
60</body>
61</html>
62